From v2.2 to v2.4 #

Two weeks later, we released two more version updates, then we broke through a thousand stars, thank you for your love of windicss. During which many new features were released and bug fixes. Here is a summary.

Features #

• Support theme function

  get your configuration values in css

  /* input */
  .btn-blue {
    background-color: theme('colors.blue.500');
  }
  /* output */
  .btn-blue {
    background-color: #3b82f6;
  }
  

• Support layer directive

  put style to the right position

  /* input */
  @layer components {
    .components {
      @apply bg-red-500;
    }
  }
  @layer utilities {
    .utilities {
      max-width: 768px;
    }
  }
  @layer base {
    base {
      margin-left: auto;
    }
  }
  .normal {
    margin-right: auto; /* components by default */
  }
  
  /* output */
  base {
    margin-left: auto;
  }
  .components {
    --tw-bg-opacity: 1;
    background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
  }
  .normal {
    margin-right: auto;
  }
  .utilities {
    max-width: 768px;
  }
  

• Transform api

  Replace require with transform let you can import tailwind plugin. For more details, please referer to windicss/plugins

  // windi.config.js
  const { transform } = require('windicss/helpers')
  
  module.exports = {
    theme: {
      // ...
    },
    plugins: [
      transform('plugin-name'), // replace require with transform
    ],
  }
  

• Support disable cross browser prefixer

  You can set prefixer = false to disable prefixer

  // windi.config.js
  module.exports = {
    prefixer: false,
    theme: {
      // ...
    },
  }
  

• Support nested css

  This is actually a bit like less or postcss syntax.

  /* input */
  #bundle {
    .button {
      display: block;
      border: 1px solid black;
      background-color: grey;
      &:hover {
        background-color: white;
      }
    }
  }
  /* output */
  #bundle .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
  }
  #bundle .button:hover {
    background-color: white;
  }
  

• New meta sort method

  We have introduced a new sorting algorithm to sort according to meta information, which allows us to accurately control the location of each utility generated, and to ensure the accuracy of the generated css.

• support define color with keyword, hexa, hsl, hsla, hwb, srgb.

  Now you can use these color types in the configuration file, and windi will convert them to rgb for you.

  // windi.config.js
  module.exports = {
    theme: {
      colors: {
        name: 'blue',
        hex: '#1c1c1e',
        hexa: '#0000ff00',
        rgb: 'rgb(23, 23, 24)',
        rgba: 'rgba(23, 23, 25, 0.5)',
        hsl: 'hsl(120, 100%, 50%)',
        hsla: 'hsla(120, 100%, 75%, 0.3)',
        hwb: 'hwb(280, 40%, 60%)',
        hwba: 'hwb(280, 40%, 60%, 0)',
        srgb: 'rgb(69.99%, 32%, 32%)',
      },
    },
  }
  

New things #

1. New Domain Name, https://windicss.org/, thanks to @antfu.

2. VSCode Extension, https://github.com/windicss/windicss-intellisense

3. Webpack Plugin, https://github.com/windicss/windicss-webpack-plugin, thanks to @harlan-zw

4. Nuxt Plugin, https://github.com/windicss/nuxt-windicss-module, thanks to @harlan-zw

5. Community Plugin support. https://github.com/windicss/plugins