{"id":12671,"library":"windicss","title":"Windi CSS","description":"Windi CSS was an on-demand, utility-first CSS framework designed as a performant alternative to Tailwind CSS, aiming to address compilation speed issues in larger projects by providing quicker hot module replacement (HMR) and eliminating the need for production purging. It dynamically scanned HTML and CSS to generate utilities. The project officially announced its deprecation in March 2022, recommending users migrate to Tailwind CSS v3 or newer. While its last stable version, 3.5.6, included some Tailwind v3 utility classes and bug fixes, no further active development, new features, or security updates are expected. Key differentiators during its active period included its 'on-demand' compilation approach and extensive framework integrations.","status":"deprecated","version":"3.5.6","language":"javascript","source_language":"en","source_url":"https://github.com/windicss/windicss","tags":["javascript","windicss","tailwindcss","css","compiler","typescript"],"install":[{"cmd":"npm install windicss","lang":"bash","label":"npm"},{"cmd":"yarn add windicss","lang":"bash","label":"yarn"},{"cmd":"pnpm add windicss","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The core class for programmatic CSS processing. Windi CSS primarily ships as ESM, though CJS is available. For TypeSCript projects, this is the main entry point for compilation.","wrong":"const Processor = require('windicss').Processor","symbol":"Processor","correct":"import { Processor } from 'windicss'"},{"note":"Used to parse HTML content and extract Windi CSS utility classes. Essential for the on-demand generation process.","wrong":"const { HTMLParser } = require('windicss')","symbol":"HTMLParser","correct":"import { HTMLParser } from 'windicss'"},{"note":"A convenient utility function for quick generation of CSS from a string or file path, often used for simpler CLI or build steps without needing to instantiate Processor directly.","wrong":"const { generate } = require('windicss')","symbol":"generate","correct":"import { generate } from 'windicss'"}],"quickstart":{"code":"import { Processor, HTMLParser } from 'windicss';\nimport { readFileSync, writeFileSync } from 'fs';\nimport { resolve } from 'path';\n\nasync function generateWindiCSS() {\n  const htmlContent = `\n    <div class=\"p-4 bg-blue-500 text-white rounded shadow-lg\">\n      <h1 class=\"text-2xl font-bold mb-2\">Hello Windi CSS!</h1>\n      <p class=\"text-sm\">This is a paragraph with some utility classes.</p>\n      <button class=\"px-3 py-2 bg-green-500 hover:bg-green-600 rounded\">Click Me</button>\n    </div>\n  `;\n\n  // Initialize the Windi CSS processor\n  const processor = new Processor();\n\n  // Parse HTML to extract utility classes\n  const htmlParser = new HTMLParser(htmlContent);\n  const { classes } = htmlParser.parseClasses();\n\n  // Interpret the extracted classes to generate Windi CSS utilities\n  const interpreted = processor.interpret(classes.join(' '));\n\n  // Generate the actual CSS\n  const { css } = await interpreted.generate();\n\n  // Optionally, include preflight base styles\n  const preflightSheet = processor.preflight();\n  const preflightCSS = preflightSheet.build();\n\n  const finalCSS = `${preflightCSS}\\n${css}`;\n\n  const outputPath = resolve('./dist/windicss-output.css');\n  writeFileSync(outputPath, finalCSS);\n\n  console.log(`Windi CSS generated and written to ${outputPath}`);\n}\n\ngenerateWindiCSS().catch(console.error);\n","lang":"typescript","description":"This quickstart demonstrates how to programmatically use Windi CSS to process HTML content, extract utility classes, and generate the corresponding CSS, including preflight styles, within a Node.js environment."},"warnings":[{"fix":"Migrate your project to use Tailwind CSS (v3+) and its official PostCSS setup. For existing projects, consider a migration path outlined in the Windi CSS documentation or community guides.","message":"Windi CSS has been officially deprecated and is no longer actively maintained. The project announced its deprecation in March 2022, recommending users migrate to Tailwind CSS v3 or newer. New features, bug fixes, and security updates are not expected.","severity":"breaking","affected_versions":">=3.x"},{"fix":"Review the Windi CSS documentation for specific feature support. For full and up-to-date Tailwind CSS features, migrating to Tailwind CSS is recommended.","message":"While Windi CSS aimed for compatibility with Tailwind CSS v2.0 and later added some Tailwind v3 utility classes, it does not guarantee full feature parity with the latest versions of Tailwind CSS. Users might encounter missing features or subtle behavioral differences compared to official Tailwind CSS.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Thoroughly test your styles after updating to v3.5.x, especially if you use default or renamed color utilities. Consult the release notes for specific color changes.","message":"Recent minor versions (v3.5.x) included fixes related to 'renamed colors' and 'default colors provided by Tailwind CSS v3'. If you rely on custom color palettes or older Tailwind v2 color names, these updates might subtly change your output without explicit configuration.","severity":"gotcha","affected_versions":">=3.5.0"},{"fix":"Utilize the official or community-maintained framework plugins for optimal integration and development experience. If direct API usage is necessary, consult the 'API' section of the Windi CSS documentation thoroughly.","message":"Windi CSS is primarily designed to be integrated via bundler-specific plugins (e.g., for Vite, Webpack, Rollup, Nuxt). While a programmatic API exists, direct manual integration into a build pipeline without these plugins can be more complex and prone to misconfiguration.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update Windi CSS to version 3.4.3 or higher, where this bug was addressed.","cause":"An issue within the internal class parsing logic, especially with complex or deeply nested utility classes.","error":"Maximum call stack size exceeded at guessClassName"},{"fix":"Upgrade Windi CSS to version 3.4.4 or newer to resolve the Preflight CLI issue.","cause":"A bug in the CLI integration prevented the preflight base styles from being correctly injected into the generated CSS.","error":"Windi CSS Preflight styles not applying when using CLI"},{"fix":"Update Windi CSS to version 3.4.3 or higher to fix the ClassParser issue with JSX content.","cause":"Parsing error when Windi CSS encountered specific patterns within JSX functional components, leading to incorrect utility class extraction.","error":"ClassParser incorrectly end group with jsx functional component content"}],"ecosystem":"npm"}