gatsby-plugin-windicss^unofficial

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

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

⚡️ See speed comparison with Tailwind

Features

- ⚡️ It's FAST - 20~100x times faster than tailwindcss
- 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
- 🍃 Load configurations from tailwind.config.js
- 📄 CSS @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 windicss gatsby-plugin-windicss


npm i windicss gatsby-plugin-windicss


`

:warning: This module is a pre-release, please report any issues you find.

Usage

Within your gatsby-config.js add the following.

`js
// gatsby-config.js
module.exports = {
// ...
plugins: [
{
resolve: gatsby-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 tailwindcss, you will need to remove it.

`diff
plugins: [
{
resolve: gatasby-plugin-postcss,
options: {
// ...
- require("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 tailwindcss, please consult the documentation on migrating.

Configuration

- Default:

`js
export default {
scan: {
exclude: ["node_modules", ".git", "dist", "public", ".cache", ".temp"],
},
transformCSS: "pre",
};
`

- See options.ts for configuration reference.

$3

#### Disable Preflight

_gatsby-config.js_

`js
// gatsby-config.js
module.exports = {
// ...
plugins: [
{
resolve: gatsby-plugin-windicss,
options: {
preflight: false,
},
},
],
};
`

Caveats

$3

@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

License

MIT License © 2021 blackcater