windicss-webpack-plugin

webpack-windicss-plugin

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

⚡️ See speed comparison with Tailwind

Features

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

Install

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

webpack.config.js

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

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

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

// main.js
import 'windi.css'

Other examples

See ./example

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

Migration from Tailwind CSS

If you are already using Tailwind CSS for your app, you can follow these instructions to migrate your installation.

package.json

Some of your dependencies are no longer required, you can remove them if they were only needed for Tailwind CSS.

- "tailwindcss": "*",
- "postcss": "*",
- "autoprefixer": "*",

tailwind.config.js

All variants are enabled, since the overhead they caused is fixed by Windi's on-demand nature. purge is no longer needed as well. colors and plugins imports need to be renamed to windicss instead.

-const colors = require('tailwindcss/colors')
+const colors = require('windicss/colors')
-const typography = require('@tailwindcss/typography')
+const typography = require('windicss/plugin/typography')

module.exports = {
- purge: {
-   content: [
-     './**/*.html',
-   ],
-   options: {
-     safelist: ['prose', 'prose-sm', 'm-auto'],
-   },
- },
- variants: {
-   extend: {
-     cursor: ['disabled'],
-   }
- },
  darkMode: 'class',
  plugins: [typography],
  theme: {
    extend: {
      colors: {
        teal: colors.teal,
      },
    }
  },
}

main.css

You can now remove the Tailwind imports from your css entry.

- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';

Cleanup (optional)

The following files can be removed if you don't use their other features.

- postcss.config.js

All set.

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

TypeScript

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 'webpack-windicss-plugin'

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

Configuration

See options.ts for configuration reference.

Caveats

Scoped Style

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

Credits

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

License

MIT License © 2021 Harlan Wilton