{"id":20863,"library":"windicss-webpack-plugin","title":"WindiCSS Webpack Plugin","description":"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.","status":"maintenance","version":"1.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/windicss/windicss-webpack-plugin","tags":["javascript","typescript"],"install":[{"cmd":"npm install windicss-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add windicss-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add windicss-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for webpack plugin integration","package":"webpack","optional":false},{"reason":"core library for utility generation","package":"windicss","optional":false}],"imports":[{"note":"ESM only; CommonJS require is not supported. The plugin is a default export.","wrong":"const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')","symbol":"default","correct":"import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'"},{"note":"This is a default export, not a named export. Named import will fail.","wrong":"import { WindiCSSWebpackPlugin } from 'windicss-webpack-plugin'","symbol":"WindiCSSWebpackPlugin","correct":"import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'"},{"note":"Imported as a side-effect module to enable DevTools autocompletion. Requires plugin configuration.","symbol":"virtual:windi-devtools","correct":"import 'virtual:windi-devtools'"}],"quickstart":{"code":"// webpack.config.js\nimport WindiCSSWebpackPlugin from 'windicss-webpack-plugin';\n\nexport default {\n  // ... other webpack config\n  plugins: [\n    new WindiCSSWebpackPlugin({\n      // optional: specify config file path\n      config: './windi.config.ts',\n      // enable attributify mode\n      attributify: true,\n      // alias shortcuts\n      alias: {\n        hstack: 'flex items-center',\n        vstack: 'flex flex-col',\n      },\n      // enable devtools\n      devTools: true,\n    }),\n  ],\n};\n\n// In your entry file (e.g., main.js)\nimport 'virtual:windi.css'; // required to inject generated styles\nimport 'virtual:windi-devtools'; // optional devtools","lang":"javascript","description":"Shows webpack plugin configuration with attributify mode, aliases, devtools, and required CSS import."},"warnings":[{"fix":"Replace with UnoCSS webpack plugin: https://github.com/unocss/unocss/tree/main/packages/webpack","message":"WindiCSS Webpack Plugin is in maintenance-only mode. Consider migrating to UnoCSS for new projects.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"If you relied on <style> tags in transformedCSS, update your processing pipeline to handle raw CSS strings.","message":"v1.8.0 removes CSS style wrapping from transformedCSS output. Custom post-processing may be affected.","severity":"breaking","affected_versions":"=1.8.0"},{"fix":"Use ESM import syntax (import or dynamic import).","message":"ESM-only since v1.0.0; CommonJS require() will fail with Module not found.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Create a windi.config.ts file in your project root with desired settings.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update type augmentation to use webpack's declare module augmentation.","message":"TypeScript augmentation changed in v1.7.6; preferred method is now webpack augmentation instead of global.","severity":"deprecated","affected_versions":">=1.7.6"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Replace const X = require('...') with import X from '...'","cause":"Using CommonJS require() instead of ESM import.","error":"Module not found: Can't resolve 'windicss-webpack-plugin'"},{"fix":"Use default import: import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'","cause":"Named import instead of default import.","error":"TypeError: WindiCSSWebpackPlugin is not a constructor"},{"fix":"Install windicss as a dependency: npm install windicss","cause":"Missing peer dependency windicss package.","error":"Error: Cannot find module 'windicss'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}