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

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!

Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.