windicss-craco-plugin

🍃 Windi CSS for craco
^{Next generation utility-first CSS framework.}

Features

• 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2)
• 📦 On-demand native elements style reseting
• 🔥 Hot module replacement (HMR)
• 🍃 Load configurations from tailwind.config.js
• 🤝 Framework-agnostic - Vue, React, Svelte and Angular!
• 📄 CSS @apply / @screen directives transforms (also works for Vue SFC's <style>)
• 🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)

Install

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

craco.config.js

Modify your craco.config.js file as below:

// craco.config.js
const windiCSSCracoPlugin = require("windicss-craco-plugin");

module.exports = {
  // ...
  plugins: [
    {
      plugin: windiCSSCracoPlugin,
      options: {
        scan: {
          dirs: ["./"],
          exclude: ["node_modules", ".git", "public/index.html"],
        },
      },
    },
  ],
};

Make sure you have installed windicss and add the virtual module to your index.(j|t)sx? file:

import "windi.css";

Migration

If you are already using Tailwind CSS for your app, please consult the documentation on migrating.

Notes

This plugin comes with windicss-webpack-plugin integrated already. Options passed via the options property as above will be passed directly to the windicss-webpack-plugin constructor.

By default, the following directories and files are excluded: node_modules, .git, and public/index.html.

Credits

• Windi team
• @antfu Based on his Rollup / Vite implementation & his util package

License

MIT License © 2021 Shannon Rothe