vite-plugin-windicss

Windicss for Vite
^{a.k.a On-demand TailwindCSS}

Features

• ⚡️ It's FAST - about 15~20 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>)

Usage

Install

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

Add it to vite.config.js

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

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

// main.js
import 'windi.css'

That's all ⚡️

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.

- "tailwindccs": "*",
- "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 Taiwind 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!

Example

See ./example or Vitesse@feat/windicss

Sponsors

License

MIT License © 2021 Anthony Fu