Integration for Gridsome

Install

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

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

Usage

Within your gridsome.config.js add the following.

gridsome.config.js
export default {
  // ...
  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',
      '*.template.html',
      'app.html',
    ],
    include: [],
  },
  transformCSS: 'pre',
  preflight: {
    alias: {
      // add gridsome aliases
      'g-link': 'a',
      'g-image': 'img',
    },
  },
}

Examples

Disable Preflight

gridsome.config.js

export default {
  // ...
  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

Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.