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

  cssCopy

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

• Support layer directive

  put style to the right position

  cssCopy

  /* 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

  jsCopy

  // 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

  jsCopy

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

• Support nested css

  This is actually a bit like less or postcss syntax.

  cssCopy

  /* 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.

  jsCopy

  // 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