gatsby-plugin-windicss^unofficial

Windi CSS for Gatsby, it's fast! ⚡️
^{a.k.a On-demand Tailwind CSS}

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

yarn add windicss gatsby-plugin-windicss
# npm i windicss gatsby-plugin-windicss

⚠️ This module is a pre-release, please report any issues you find.

Usage

Within your gatsby-config.js add the following.

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

 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:

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

See options.ts for configuration reference.

Examples

Disable Preflight

gatsby-config.js

// gatsby-config.js
module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-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