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)

``bash
vue add windicss
`

$3

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 for configuration details.

Migrating

If you were previously using vue-cli-plugin-tailwind, please consult the documentation 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 for configuration reference.

$3

#### Disable Preflight

_vue.config.js_
`js
module.exports = {
// ...
pluginOptions: {
windicss: {
preflight: false,
}
}
}
``

Credits

- Windy CSS team

Sponsors

License

MIT License © 2021 Harlan Wilton