gridsome-plugin-windicss

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
• 🧩 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