Nuclear Pumpkin Mayhem

    gridsome-plugin-windicss

    1.0.7 • Public • Published

    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

    ⚠️ 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',
        }
      }
    }

    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

    Install

    npm i gridsome-plugin-windicss

    DownloadsWeekly Downloads

    16

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    6.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • antfu
    • voorjaar
    • hannoeru
    • harlan_zw