vue-cli-plugin-windicss
v1.1.6
Published
Windi CSS for Vue CLI
Downloads
1,565
Readme
Features
- ⚡️ It's FAST - 20~100x times faster than vue-cli-plugin-tailwind
- 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
- 🍃 Load configurations from
tailwind.config.js
- 📄 Use
@apply
/@screen
directives in any file: Vue SFC, Less, SCSS, SASS, PostCSS, Stylus - 🎳 Support Utility Groups - e.g.
bg-gray-200 hover:(bg-gray-100 text-red-300)
Setup
Install using Vue CLI. (Vue CLI 4+ is recommended)
vue add windicss
Import
Make sure the import for Windi CSS is within your main.js
file, the above should do it for you.
import 'windi.css'
Configuration
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.
Migrating
If you were previously using vue-cli-plugin-tailwind
, please consult the documentation on migrating.
yarn remove vue-cli-plugin-tailwind
Configuration
- Default:
export default {
scan: {
dirs: ['src', 'public'],
exclude: [
'node_modules',
'.git',
],
include: []
},
}
- See options.ts for configuration reference.
Examples
Disable Preflight
vue.config.js
module.exports = {
// ...
pluginOptions: {
windicss: {
preflight: false,
}
}
}
Credits
Sponsors
License
MIT License © 2021 Harlan Wilton