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 @loonpwn

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

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