Tailwind CSS is a highly popular, utility-first CSS framework designed for rapidly building custom user interfaces directly in your markup. The current stable release series is v4.2.2, which represents a significant architectural shift with a new, faster Rust-based engine (Oxide and Lightning CSS) for processing CSS. It has an active release cadence with frequent patch and minor updates. Key differentiators for v4 include its move towards a "CSS-first" configuration model, where customization is primarily handled within CSS files using `@theme` directives, and automatic content detection, simplifying the build process. Unlike previous versions, Tailwind CSS v4 no longer requires PostCSS for its core compilation, as it integrates its own CSS processing pipeline. Dedicated bundler plugins like `@tailwindcss/vite` and `@tailwindcss/webpack` are provided for seamless integration into modern build ecosystems, while still offering a PostCSS compatibility layer via `@tailwindcss/postcss` for existing setups. This version emphasizes performance, a smaller footprint, and leverages modern CSS features like native cascade layers and `color-mix()` for enhanced capabilities and developer experience.
npm install tailwindcssVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic setup for Tailwind CSS v4.2.2 using the new CSS-first configuration, `@tailwindcss/postcss` plugin, and the CLI to generate CSS. It includes custom theme variables defined via the `@theme` directive.
Migrate your `tailwind.config.js` settings to the new `@theme` syntax within your main CSS file (e.g., `src/input.css`). Refer to the official v4 migration guide for detailed steps, or use the `@tailwindcss/upgrade` tool.
Update your primary CSS file (e.g., `src/input.css`) to use `@import 'tailwindcss';` instead of the three separate `@tailwind` directives.
Install `@tailwindcss/postcss` and update your `postcss.config.js` to reference `tailwindcss: {}` (or `@tailwindcss/postcss: {}` if explicit). Remove `autoprefixer` and `postcss-import` from your PostCSS configuration and `devDependencies`.Review and rewrite custom plugins according to the new v4 plugin API documentation. Use the `@tailwindcss/upgrade` tool, but be prepared for manual adjustments in complex plugin scenarios.
If supporting older browsers is critical, consider sticking to Tailwind CSS v3.4.x. For v4 projects, ensure your target browser list is compatible with modern CSS features.
Remove Sass, Less, or Stylus from your build pipeline when using Tailwind CSS v4. Leverage Tailwind's built-in capabilities for imports and nesting directly in CSS.
For PostCSS integration, ensure `@tailwindcss/postcss` is installed and used in your `postcss.config.js` (e.g., `plugins: { tailwindcss: {} }` or `plugins: { '@tailwindcss/postcss': {} }`).Ensure `tailwindcss` is installed as a development dependency (`npm install -D tailwindcss`) and run the command using `npx tailwindcss` or add your `node_modules/.bin` directory to your PATH.
Review your project structure. If issues persist, refer to the official documentation for manual content configuration options within the v4 CSS-first approach, or consider providing explicit paths if necessary, although this is generally not required for v4.
Ensure your build process correctly pipes your CSS through the Tailwind CSS v4 engine. If using PostCSS, verify `@tailwindcss/postcss` is correctly configured in `postcss.config.js` and that PostCSS is applied to your CSS files. If using the CLI, ensure it targets the correct input CSS file containing the `@import`.