https://github.com/windicss/vue-cli-plugin-windicss
🍃 Windi CSS for Vue CLI ⚡
https://github.com/windicss/vue-cli-plugin-windicss
Last synced: 10 months ago
JSON representation
🍃 Windi CSS for Vue CLI ⚡
- Host: GitHub
- URL: https://github.com/windicss/vue-cli-plugin-windicss
- Owner: windicss
- License: mit
- Created: 2021-03-22T11:47:55.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-07-11T00:46:30.000Z (almost 4 years ago)
- Last Synced: 2025-08-21T06:56:15.053Z (10 months ago)
- Language: TypeScript
- Size: 4.68 MB
- Stars: 16
- Watchers: 4
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/forsartis/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)
```bash
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`.
```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](https://windicss.netlify.app/guide/configuration.html) for configuration details.
## Migrating
If you were previously using `vue-cli-plugin-tailwind`, please consult the [documentation](https://windicss.netlify.app/guide/migration.html) on migrating.
```bash
yarn remove vue-cli-plugin-tailwind
```
## Configuration
- Default:
```js
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
- [Windy CSS team](https://github.com/windicss)
## Sponsors
## License
MIT License © 2021 [Harlan Wilton](https://github.com/harlan-zw)