Windi CSS for webpack, it's fast! ⚡️
^{a.k.a On-demand Tailwind CSS}

⚡️ See speed comparison with Tailwind

• ⚡️ It's FAST - 20~100x times faster than Tailwind on webpack apps
• 🧩 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 vanilla!
• 📄 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)

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

If you have access to modify the webpack.config.js directly, then you can do the following.

// webpack.config.js
import WebpackWindiCSSPlugin from 'windicss-webpack-plugin'

export default {
  // ...
  plugins: [
    new WindiCSSWebpackPlugin()
  ],
};

// main.js
import 'windi.css'

See ./example

That's all. Build your app just like what you would do with Tailwind CSS, but much faster! ⚡️

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

That's all, fire up your app and enjoy the speed!

You can use TypeScript for your config file if you're using esbuild.

Simply rename your config it to tailwind.config.ts.

// tailwind.config.ts
import { defineConfig } from 'windicss-webpack-plugin'

export default defineConfig({
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        teal: {
          100: '#096',
        },
      },
    },
  },
})

See options.ts for configuration reference.

You will need to set transformCSS: 'pre' to get it work.

@media directive with scoped style can only works with css postcss scss but not sass, less nor stylus

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

MIT License © 2021 Harlan Wilton