tailwind.config.js
@apply
/ @screen
directives transformsbg-gray-200 hover:(bg-gray-100 text-red-300)
Install using Vue CLI. (Vue CLI 4+ is recommended)
vue add windicss
⚠️ This module is a pre-release, please report any issues you find.
Then, add the configuartion
module.exports = {
pluginOptions: {
windicss: {
// see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
},
},
}
And finally, import windi.css
in your entry
import 'windi.css'
That's it! Starting using classes utilities or CSS directives in your app, and enjoy the speed! ⚡️
If you were previously using vue-cli-plugin-tailwind
, please consult the documentation on migrating.
yarn remove vue-cli-plugin-tailwind
export default {
scan: {
dirs: ['src'],
exclude: [
'node_modules',
'.git',
'public/**/*',
'*.template.html',
'index.html',
],
include: [],
},
transformCSS: 'pre',
}
vue.config.js
module.exports = {
// ...
pluginOptions: {
windicss: {
preflight: false,
},
},
}
@media
directive with scoped style can only work with css
postcss
scss
but not sass
, less
nor stylus