vue-cli-plugin-windicss
Windi CSS for Vue CLI, it's fast! ⚡️
a.k.a On-demand Tailwind CSS
⚡️ See speed comparison with Tailwind
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 yourmain.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 usingvue-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](https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts) for configuration reference.
### Examples
#### Disable Preflight
_vue.config.js_
```js
module.exports = {
// ...
pluginOptions: {
windicss: {
preflight: false,
}
}
}
Credits
Sponsors
<img src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/>