WindiCSS Webpack Plugin

1.8.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin for Windi CSS, an on-demand utility-first CSS framework compatible with Tailwind CSS v2. Current version 1.8.0 (stable, maintenance-only). Integrates with webpack to provide zero-configuration CSS utility generation, directives (@apply, @screen, etc.), attributify mode, alias config, and DevTools integration. Consider UnoCSS as a modern alternative. This is a maintenance-only release, no new features planned.

Common errors

error Module not found: Can't resolve 'windicss-webpack-plugin' ↓

cause Using CommonJS require() instead of ESM import.

fix

Replace const X = require('...') with import X from '...'

error TypeError: WindiCSSWebpackPlugin is not a constructor ↓

cause Named import instead of default import.

fix

Use default import: import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

error Error: Cannot find module 'windicss' ↓

cause Missing peer dependency windicss package.

fix

Install windicss as a dependency: npm install windicss

Warnings

deprecated WindiCSS Webpack Plugin is in maintenance-only mode. Consider migrating to UnoCSS for new projects. ↓

fix Replace with UnoCSS webpack plugin: https://github.com/unocss/unocss/tree/main/packages/webpack

breaking v1.8.0 removes CSS style wrapping from transformedCSS output. Custom post-processing may be affected. ↓

fix If you relied on <style> tags in transformedCSS, update your processing pipeline to handle raw CSS strings.

breaking ESM-only since v1.0.0; CommonJS require() will fail with Module not found. ↓

fix Use ESM import syntax (import or dynamic import).

gotcha The plugin expects a windi.config.ts or tailwind.config.js file in the project root, or it will fall back to defaults. Missing config may cause unexpected output. ↓

fix Create a windi.config.ts file in your project root with desired settings.

deprecated TypeScript augmentation changed in v1.7.6; preferred method is now webpack augmentation instead of global. ↓

fix Update type augmentation to use webpack's declare module augmentation.

Install

npm install windicss-webpack-plugin

yarn add windicss-webpack-plugin

pnpm add windicss-webpack-plugin

Imports

default

wrong

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

correct

import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

ESM only; CommonJS require is not supported. The plugin is a default export.

WindiCSSWebpackPlugin

wrong

import { WindiCSSWebpackPlugin } from 'windicss-webpack-plugin'

correct

import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

This is a default export, not a named export. Named import will fail.

virtual:windi-devtools
```
import 'virtual:windi-devtools'
```
Imported as a side-effect module to enable DevTools autocompletion. Requires plugin configuration.

Quickstart

Shows webpack plugin configuration with attributify mode, aliases, devtools, and required CSS import.

// webpack.config.js
import WindiCSSWebpackPlugin from 'windicss-webpack-plugin';

export default {
  // ... other webpack config
  plugins: [
    new WindiCSSWebpackPlugin({
      // optional: specify config file path
      config: './windi.config.ts',
      // enable attributify mode
      attributify: true,
      // alias shortcuts
      alias: {
        hstack: 'flex items-center',
        vstack: 'flex flex-col',
      },
      // enable devtools
      devTools: true,
    }),
  ],
};

// In your entry file (e.g., main.js)
import 'virtual:windi.css'; // required to inject generated styles
import 'virtual:windi-devtools'; // optional devtools