This is a paragraph with custom theme colors and spacing.
\n\n\n*/\n\n// 5. Add a build script to your package.json\n// The 'tailwindcss' command line tool processes your CSS.\n// package.json\n/*\n{\n \"name\": \"my-tailwind-app\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build:css\": \"tailwindcss -i ./src/input.css -o ./public/output.css --watch\"\n },\n \"devDependencies\": {\n \"tailwindcss\": \"^4.2.2\",\n \"@tailwindcss/postcss\": \"^4.2.2\",\n \"postcss\": \"^8.4.38\"\n }\n}\n*/\n\n// 6. Run the build command and open public/index.html\n// npm run build:css\n```","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Tailwind CSS v4.0 introduces a \"CSS-first\" configuration, deprecating the `tailwind.config.js` file for theme customization. All theme and plugin configurations are now primarily handled directly within your main CSS file using the `@theme` directive.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update your primary CSS file (e.g., `src/input.css`) to use `@import 'tailwindcss';` instead of the three separate `@tailwind` directives.","message":"The `@tailwind base; @tailwind components; @tailwind utilities;` directives are no longer supported in Tailwind CSS v4. They must be replaced by a single `@import 'tailwindcss';` statement in your main CSS entry point.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"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`.","message":"Tailwind CSS v4 no longer ships its core compilation as a PostCSS plugin within the `tailwindcss` package. To use Tailwind v4 with PostCSS, you must install and configure the new dedicated `@tailwindcss/postcss` plugin. Additionally, `autoprefixer` and `postcss-import` are no longer needed as their functionalities are built directly into the v4 engine.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"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.","message":"Existing custom JavaScript plugins created for Tailwind CSS v3 are likely incompatible with v4's new Rust-based engine and CSS-first configuration. The plugin API has been significantly revised.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"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.","message":"Tailwind CSS v4 is designed for modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+) and leverages cutting-edge CSS features like cascade layers, registered custom properties (`@property`), and `color-mix()`. This means it will not work or degrade poorly in older browsers.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"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.","message":"Tailwind CSS v4 is a full-featured CSS build tool and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. It handles imports, vendor prefixing, and nesting internally, rendering external preprocessors redundant or conflicting.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For PostCSS integration, ensure `@tailwindcss/postcss` is installed and used in your `postcss.config.js` (e.g., `plugins: { tailwindcss: {} }` or `plugins: { '@tailwindcss/postcss': {} }`).","cause":"Attempting to use `require('tailwindcss')` directly as a PostCSS plugin in v4, or missing `@tailwindcss/postcss` package.","error":"Error: \"tailwindcss\" is not a PostCSS plugin."},{"fix":"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.","cause":"The Tailwind CSS CLI is not installed or not accessible in your system's PATH.","error":"tailwindcss: command not found"},{"fix":"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.","cause":"While v4 has automatic content detection, this error can still occur if template files are in non-standard locations, or if the auto-detection heuristics fail for specific project structures.","error":"No utility classes were generated. Ensure your content config is correct."},{"fix":"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`.","cause":"The `@import 'tailwindcss';` directive in your CSS file is not being processed by the Tailwind CSS PostCSS plugin (if using PostCSS) or the Tailwind CSS CLI is not set up correctly to parse it.","error":"Unknown @import rule: \"tailwindcss\""}],"ecosystem":"npm"}