gridsome-plugin-windicss
v1.0.7
Published
Windi CSS for Gridsome
Downloads
42
Readme
Features
- ⚡️ It's FAST - 20~100x times faster than gridsome-plugin-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)
Install
yarn add gridsome-plugin-windicss -D
# npm i gridsome-plugin-windicss -D
:warning: This module is a pre-release, please report any issues you find.
Usage
Within your gridsome.config.js
add the following.
// gridsome.config.js
module.exports = {
// ...
plugins: [
{
use: 'gridsome-plugin-windicss',
options: {
// see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
}
},
],
}
This module won't work with gridsome-plugin-tailwindcss
, you will need to remove it.
plugins: [
{
- use: 'gridsome-plugin-tailwindcss',
- options: {
- // ...
- }
},
],
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 gridsome-plugin-tailwindcss
, please consult the documentation on migrating.
Configuration
- Default:
export default {
scan: {
dirs: ['./'],
exclude: [
'node_modules',
'.git',
'dist',
'.cache',
'.temp',
],
},
preflight: {
alias: {
// add gridsome aliases
'g-link': 'a',
'g-image': 'img',
}
}
}
- See options.ts for configuration reference.
Examples
Disable Preflight
ngridsome.config.js
module.exports = {
// ...
plugins: [
{
use: 'gridsome-plugin-windicss',
options: {
preflight: false,
}
},
],
}
Caveats
Scoped Style
@media
directive with scoped style can only work with css
postcss
scss
but not sass
, less
nor stylus
Credits
- Windy team
- @antfu Based on his Rollup / Vite implementation & his util package
Sponsors
License
MIT License © 2021 Harlan Wilton