gridsome-plugin-windicss

🍃 Windi CSS for Gridsome ⚡

Showing:

Popularity

Downloads/wk

32

GitHub Stars

6

Maintenance

Last Commit

2mos ago

Contributors

0

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

License

MIT License © 2021 Harlan Wilton

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial