{"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,"search_vec":"'1.8.0':25 'alia':47 'altern':57 'appli':42 'attributifi':45 'compat':18 'config':48 'configur':37 'consid':52 'css':8,16,21,38 'current':23 'demand':12 'devtool':50 'direct':41 'etc':44 'featur':67 'first':15 'framework':17 'generat':40 'integr':30,51 'javascript':69 'mainten':28,62 'maintenance-on':27,61 'mode':46 'modern':56 'new':66 'on-demand':10 'plan':68 'plugin':3,5 'provid':34 'releas':64 'screen':43 'stabl':26 'tailwind':20 'typescript':70 'unocss':53 'util':14,39 'utility-first':13 'v2':22 'version':24 'webpack':2,4,32 'windi':7 'windicss':1 'zero':36 'zero-configur':35","created_at":"2026-04-25T11:25:22.212392+00:00","updated_at":"2026-04-25T11:25:22.212392+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://windicss.org","github":"https://github.com/windicss/windicss-webpack-plugin","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/windicss-webpack-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}