@tailwind base and @tailwind components no longer work in Tailwind v4

[Amin-baxXx]

I've noticed that in Tailwind CSS v4, the use of @tailwind base and @tailwind components has been deprecated, and the error suggests using @import "tailwindcss/preflight" and @tailwind utilities instead.

While I understand the intention behind these changes, I believe this might confuse users migrating from older versions, especially those who follow outdated tutorials or documentation.

Would it be possible to:

-1 Provide more backward compatibility for these directives?
2- Include a clearer migration guide for this specific change in the official documentation?

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
Build the CSS using CLI with the command tailwindcss build.
Observe the errors in the build output.
Environment:
Tailwind CSS version: 4.x
Build tool: CLI
IDE: WebStorm 2024
Node.js version: v22.13.0
Operating System: Windows 11 (version 24H2)

[rozsazoltan]

I believe that anyone who encounters the issue will quickly find the answer to the questions here on Docs:

• Removed @tailwind directives
• Removed deprecated utilities

or on GitHub:

• I couldn't find it here suddenly, but I assume that anyone writing here has read the previous documentation steps. So, anyone who doesn't know they mistakenly installed v4 instead of v3 can only be on the wrong path.

or on StackOverflow:

• How to upgrade TailwindCSS?
• Unable to install Tailwind on Rails 8 App
• TailwindCSS v4 Build Causes No Styles to Display in Symfony
• TailwindCSS styling is not applied
• Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite
• Integrating shadcn/ui with Tailwind CSS v4 in a Tauri Application Using Vite and React

In general, I've noticed that those who realize they've mistakenly installed v4 instead of v3 can quickly fix the issue. And those who consciously upgrade read the installation steps and/or the upgrade guide.

Maybe related: #1971 -> So, if you're reading the v3 documentation, you'll definitely install v3.

[philipp-spiess]

Hey! I can only second what @rozsazoltan said. It seems like you're trying to install Tailwind CSS v4 but run it as Tailwind CSS v3. You can find more about that in the upgrade guides.