WindiCSS v2.2 is here

This is a summary version that summarizes the improvements and added features from v2.1 to v2.2.

Features

  • New plugin scroll-snap

  • Support Config File When using CLI

  • Support Exclude Config

    This feature is very useful when you want the same strict mode as tailwind or when you want to block a utility.

    // tailwind.config.js
    const { twExclude } = require('windicss/config')
    
    module.exports = {
      theme: {
        // ...
      },
      exclude: [
        ...twEclude,
        /^first-letter:/, // diable first-letter variant
      ],
    }
    

    Using the above configuration, utilities like bg-hex-1c1c1e p-4.2 m-3.33px will not be compiled into css. You can block any utility you don't want to use by using regular expressions.

  • Support Important Utility

    Now we support using ! symbol to mark important style.

    <div class="!text-green-300 !hover:(p-4 bg-red-500)">
      ...
    </div>
    

    Will be compiled as

    .\!text-green-300 {
      --tw-text-opacity: 1 !important;
      color: rgba(110, 231, 183, var(--tw-text-opacity)) !important;
    }
    .\!hover\:p-4:hover {
      padding: 1rem !important;
    }
    .\!hover\:bg-red-500:hover {
      --tw-bg-opacity: 1 !important;
      background-color: rgba(239, 68, 68, var(--tw-bg-opacity)) !important;
    }
    
  • Support Shortcuts Config

    We have also added a shortcuts config to help you quickly add utilities. With this feature, you can even share inline components.

    // tailwind.config.js
    module.exports = {
      theme: {
        // ...
      },
      shortcuts: {
        'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
        'btn-green': 'text-white bg-green-500 hover:bg-green-700',
      },
    }
    

    css-in-js syntax is also supported for complex utility

    // tailwind.config.js
    module.exports = {
      theme: {
        // ...
      },
      shortcuts: {
        'btn': {
          'color': 'white',
          '@apply': 'py-2 px-4 font-semibold rounded-lg',
          '&:hover': {
            '@apply': 'bg-green-700',
            'color': 'black',
          },
        },
        'btn-green': 'text-white bg-green-500 hover:bg-green-700',
      },
    }
    

    The utility added by this configuration can also be directly wrapped with variant, such as sm:btn . The function of this feature is similar to @apply, it will merge all utilities into one style.

  • Add support for raw and min/max in custom screen definitions

  • Add handleIgnored Option

  • Add resolveStaticUtilities & resolveDynamicUtilities interface

  • Change Processor(path) -> Processor(require(resolve(path))) for browser support

Bug Fixes

  • Fix lost placeholder preflight
  • Fix set explicit opacity value on placeholder pseudo-element
  • Fix add boxShadow base styles
  • Fix ring utility
  • Fix add fontFamily with array
  • Fix non-class styles add by addUtilities or addComponents disappears.
  • Fix missing aspect-ratio pseudo class
  • Fix --tw-ring-opacity is missing
  • Fix Images base styles are recommended to follow Tailwind itself
  • Fix long color name doesn’t works
  • Fix plugin config extend not works
  • Fix keyframes should not be wrap with variants
  • Fix container should not be divided
  • Fix keyframes should render before animation
  • Fix leading should render after text
  • Fix deep nest colors
  • Fix CLI can't scan only files in a subfolder on Windows
  • Fix user theme should replace default theme
  • Fix gridTemplateColumns generation
  • Fix custom fontSizes as String and lineHeight as second array item misbehave
  • Fix custom animations not working
  • Fix images are not working
  • Code format and workflow improvement
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.