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

WindiCSS v2.2 is here #

Features #

Bug Fixes #

WindiCSS v2.2 is here

Features

Bug Fixes