https://github.com/windicss/gridsome-plugin-windicss

🍃 Windi CSS for Gridsome ⚡
https://github.com/windicss/gridsome-plugin-windicss

Last synced: 9 months ago
JSON representation

🍃 Windi CSS for Gridsome ⚡

Host: GitHub
URL: https://github.com/windicss/gridsome-plugin-windicss
Owner: windicss
License: mit
Created: 2021-03-22T02:57:17.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2022-07-11T00:31:25.000Z (almost 4 years ago)
Last Synced: 2025-09-17T00:54:41.088Z (9 months ago)
Language: Vue
Size: 630 KB
Stars: 7
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

gridsome-plugin-windicss

Windi CSS for Gridsome, it's fast! ⚡️

^{a.k.a On-demand Tailwind CSS}

⚡️ See speed comparison with Tailwind

## Features

- ⚡️ **It's FAST** - 20~100x times faster than [gridsome-plugin-tailwindcss](https://github.com/brandonpittman/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

```bash
yarn add gridsome-plugin-windicss -D
# npm i gridsome-plugin-windicss -D
```

:warning: This module is a pre-release, please report any [issues](https://github.com/windicss/gridsome-plugin-windicss/issues) you find.

## Usage

Within your `gridsome.config.js` add the following.

```js
// 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.

```diff
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](https://windicss.netlify.app/guide/configuration.html) for configuration details.

## Migrating

If you were previously using `gridsome-plugin-tailwindcss`, please consult the [documentation](https://windicss.netlify.app/guide/migration.html) on migrating.

## Configuration

- Default:
```js
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](https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts) for configuration reference.

### Examples

#### Disable Preflight

_ngridsome.config.js_
```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](https://github.com/antfu) Based on his Rollup / Vite implementation & his util package

## Sponsors

## License

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/windicss/gridsome-plugin-windicss

Awesome Lists containing this project

README

gridsome-plugin-windicss