nuxt-windicss v2.6.1
Features
- ā”ļø It's FAST - 20~100x times faster than @nuxtjs/tailwindcss
- š§© 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)
- š§āš¤āš§ Compatible with nuxt-vite
Install
yarn add nuxt-windicss -D
# npm i nuxt-windicss -D
Usage
Within your nuxt.config.js
add the following.
// nuxt.config.js
buildModules: [
'nuxt-windicss',
],
This module won't work with @nuxtjs/tailwindcss
, you will need to remove it.
buildModules: [
- '@nuxtjs/tailwindcss',
],
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 @nuxtjs/tailwindcss
, please consult the documentation on migrating.
Configuration
- Default:
export default {
// ...
windicss: {
scan: {
dirs: ['./'],
exclude: [
'node_modules',
'.git',
'.github',
'.nuxt/**/*'
],
},
preflight: {
alias: {
// add nuxt aliases
'nuxt-link': 'a',
// @nuxt/image module
'nuxt-img': 'img',
},
},
}
}
- See options.ts for configuration reference.
Examples
Disable Preflight
nuxt.config.js
export default {
// ...
windicss: {
preflight: false
},
}
Scan classes from a node_modules package
Out-of-the-box this module ignores any files in node_modules, this is to simplify the scanning for the majority for users.
To opt-in to this scanning you will need to setup the scan options yourself.
nuxt.config.js
export default {
// ...
hooks: {
windicss: {
options(options) {
options.scanOptions.exclude = [ '.git', '.github', '.nuxt/**/*' ]
options.scanOptions.dirs = [
'./node_modules/vue-tailwind-color-picker/src',
'./components',
'./pages',
'./layouts',
]
return options
}
}
}
}
Hooks
You can use the following nuxt hooks to modify the behaviour of the code.
windicss:config
- Arguments: FullConfig
Modify the Windi CSS configuration before it is passed to the webpack plugin.
Useful for making runtime style changes.
windicss:options
- Arguments: options
Modify the Windi CSS options before they are passed to the webpack plugin.
Useful for adding runtime directories to the scan path.
Credits
- Windy team
- @antfu Based on his Rollup / Vite implementation & his util package
License
MIT License Ā© 2021 Harlan Wilton
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago