Windi CSS for Vite, it's fast! ⚡️
a.k.a On-demand Tailwind CSS
⚡️ See speed comparison with Tailwind
- ⚡️ 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)
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! ⚡️
If you are already using Tailwind CSS for your Vite app, you can follow these instructions to migrate your installation.
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": "*"
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,
},
}
},
}
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'
})
],
};
Import windi.css
in your code entry.
import 'windi.css'
You can now remove the Tailwind imports from your css entry.
- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';
The following files can be removed if you don't use their other features.
- postcss.config.js
That's all, fire up Vite and enjoy the speed!
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',
},
},
},
},
})
See options.ts for configuration reference.
See ./example or Vitesse@feat/windicss
MIT License © 2021 Anthony Fu