Registry / web-framework / windicss-webpack-plugin

windicss-webpack-plugin

library1.8.0jsnpmunverified

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.

web-framework devops

npm install windicss-webpack-plugin

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · WINDICSS-WEBPACK-P

windicss-webpack-plugin

web-frameworkjavascriptv1.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

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

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

WindiCSSWebpackPlugin

✓ import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

✗ 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.

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

Debug

Known issues

deprecatedWindiCSS 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

affects: >=1.0.0

breakingv1.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.

affects: =1.8.0

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

fix

Use ESM import syntax (import or dynamic import).

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedTypeScript 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.

affects: >=1.7.6

Errors

Common errors & fixes

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

Using CommonJS require() instead of ESM import.

fix

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

TypeError: WindiCSSWebpackPlugin is not a constructor

Named import instead of default import.

fix

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

Error: Cannot find module 'windicss'

Missing peer dependency windicss package.

fix

Install windicss as a dependency: npm install windicss

Upgrade

Version history

1.8.0latest on npm

Audit

Dependencies

webpackrequiredpeer dependency for webpack plugin integration

windicssrequiredcore library for utility generation

Agent activity

19 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/windicss/windicss-webpack-plugin ↗

packagehttps://www.npmjs.com/package/windicss-webpack-plugin ↗

homepagehttps://windicss.org ↗