Windi CSS for Vue CLI, it's fast! ⚡️
a.k.a On-demand Tailwind CSS
⚡️ See speed comparison with Tailwind
tailwind.config.js
@apply
/ @screen
directives in any file: Vue SFC, Less, SCSS, SASS, PostCSS, Stylusbg-gray-200 hover:(bg-gray-100 text-red-300)
Install using Vue CLI. (Vue CLI 4+ is recommended)
vue add windicss
Make sure the import for Windi CSS is within your main.js
file, the above should do it for you.
import 'windi.css'
You can change the behaviour of the plugin by modifying the options in ./vue.config.js
.
// vue.config.js
module.exports = {
pluginOptions: {
windicss: {
// see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
}
}
}
If you have a tailwind.config.js
, please rename it to windi.config.js
or windi.config.ts
.
See here for configuration details.
If you were previously using vue-cli-plugin-tailwind
, please consult the documentation on migrating.
yarn remove vue-cli-plugin-tailwind
Default:
export default {
scan: {
dirs: ['src', 'public'],
exclude: [
'node_modules',
'.git',
],
include: []
},
}
See options.ts for configuration reference.
vue.config.js
module.exports = {
// ...
pluginOptions: {
windicss: {
preflight: false,
}
}
}
MIT License © 2021 Harlan Wilton