Integration for PostCSS #

🧪 Experimental.

⚠️ Using this package is discouraged as there are some limitations of PostCSS's API. Use our first-class integrations for each dedicated framework/build tool to get the best develop experience and performance. This plugin should be your last option to integrate Windi CSS.

Install #

Install postcss-windicss from NPM

npm i -D postcss-windicss

Create postcss.config.js under your project root

module.exports = {
  plugins: {
    'postcss-windicss': { /* ... */ },
  },
}

Add @windicss to your main css entry:

/* main.css */
@windicss;

Create windi.config.js / windi.config.ts under your project root with this configurations

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['src/**/*.{html,vue,jsx,tsx,svelte}'],
  },
  /* ... */
})

And enjoy!