vite-plugin-windicss

Windi CSS for Vite, it's fast! ⚡️
^{a.k.a On-demand Tailwind CSS}

Features

⚡️ It's FAST - 20~100x times faster than Tailwind on Vite
🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2)
📦 On-demand native elements style reseting
🔥 Hot module replacement (HMR)
🍃 Load configurations from tailwind.config.js
🤝 Framework-agnostic - Vue, React, Svelte and vanilla!
📄 CSS @apply / @screen directives transforms (also works for Vue SFC's <style>)
🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)

Install

npm i vite-plugin-windicss -D # yarn add vite-plugin-windicss -D

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS()
  ],
};

// main.js
import 'windi.css'

That's all. Build your app just like what you would do with Tailwind CSS, but much faster! ⚡️

Migration from Tailwind CSS

If you are already using Tailwind CSS for your Vite app, you can follow these instructions to migrate your installation.

`package.json`

Some of your dependencies are no longer required, you can remove them if they were only needed for Tailwind CSS.

- "tailwindcss": "*",
- "postcss": "*",
- "autoprefixer": "*",
+ "vite-plugin-windicss": "*"

`tailwind.config.js`

All variants are enabled, since the overhead they caused is fixed by Windi's on-demand nature. purge is no longer needed as well. colors and plugins imports need to be renamed to windicss instead.

-const colors = require('tailwindcss/colors')
+const colors = require('windicss/colors')
-const typography = require('@tailwindcss/typography')
+const typography = require('windicss/plugin/typography')

module.exports = {
- purge: {
-   content: [
-     './**/*.html',
-   ],
-   options: {
-     safelist: ['prose', 'prose-sm', 'm-auto'],
-   },
- },
- variants: {
-   extend: {
-     cursor: ['disabled'],
-   }
- },
  darkMode: 'class',
  plugins: [typography],
  theme: {
    extend: {
      colors: {
        teal: colors.teal,
      },
    }
  },
}

`vite.config.js`

Add this plugin into your configuration.

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    /* ... */
    WindiCSS({
      safelist: 'prose prose-sm m-auto'
    })
  ],
};

`main.js`

Import windi.css in your code entry.

import 'windi.css'

`main.css`

You can now remove the Tailwind imports from your css entry.

- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';

Cleanup (optional)

The following files can be removed if you don't use their other features.

- postcss.config.js

All set.

That's all, fire up Vite and enjoy the speed!

TypeScript

Enable TypeScript for your tailwind.config.js? Sure, why not?

Rename it to tailwind.config.ts and things will just work!

// tailwind.config.ts
import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        teal: {
          100: '#096',
        },
      },
    },
  },
})

Configuration

See options.ts for configuration reference.

Example

See ./example or Vitesse@feat/windicss

schelmo / vite-plugin-windicss