Tailwind CSS v4: unknown at-rule @tailwind directive in CSS

VERIFIED WAYPOINT ⚡ Saves ~44,000 tokens ($0.15) Category: CSS & Styling

🎯 Target Goal & Friction

Goal: Migrate tailwind.config.js and @tailwind directives to Tailwind v4 @import

Error Signature: CssSyntaxError: Unknown word @tailwind base / unknown at-rule @tailwind

⚡ Direct Teleport Deep Link (0ms Navigation)

https://tailwindcss.com/docs/v4-beta →

Agents skip UI exploration menus by navigating directly to this endpoint.

Verified Code / Configuration Diff

@@ app/globals.css @@
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

1-Line Instant CLI Fix

npm install @tailwindcss/postcss@next

Root Cause & Explanation

Tailwind v4 replaces `@tailwind base/components/utilities` and `tailwind.config.js` with pure CSS `@import "tailwindcss";` and native CSS `@theme` variables.