[chore]: Upgrade to TailwindCSS v4

[felipegomss]

Feature description

Request to upgrade the project dependency to TailwindCSS v4 to ensure compatibility, leverage new features, and improve performance.

Follow the TailwindCSS Upgrade Guide to streamline the update process.

Affected component/components

No response

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

[Geezgus]

I believe you can update tw in your project by yourself without much-if-any problem

[diegotraid]

I believe you can update tw in your project by yourself without much-if-any problem

There are some renamed utility classes on v4 which will "break" some styles on shadcn-ui components.

[cktang88]

part of this is to update the docs too, eg. Vite docs need to use the new Tailwind vite plugin

[MayankFawkes]

part of this is to update the docs too, eg. Vite docs need to use the new Tailwind vite plugin

True

[leonardomso]

You can use Tailwind v4 for now, just make sure you check some renamed utilities and rename them correctly in your project. If your custom colors are not being applied, make sure to import the tailwind config file into your globals.css file.

@config '../tailwind.config.ts';

Anyway, just some turnaround for now. For bigger projects it's better to wait for official support and new docs from shadcn.

[PassPuff]

I upgraded Tailwind to v4
After that I wanted to install shadcn@latest

I get the error

npx shadcn@latest init -d
✔ Pre-flight checks.
✔ Checking framework. Found Next.js.
✖ CSS Tailwind validity check.
✔ Import alias validation.

The Tailwind CSS configuration is not found in /Users/nik/frontend.
You probably do not have Tailwind CSS installed or its configuration is incorrect.
Install Tailwind CSS and try again.
Visit https://tailwindcss.com/docs/guides/nextjs to get started.

[bangonkali]

I upgraded Tailwind to v4 After that I wanted to install shadcn@latest

I get the error

npx shadcn@latest init -d ✔ Pre-flight checks. ✔ Checking framework. Found Next.js. ✖ CSS Tailwind validity check. ✔ Import alias validation.

The Tailwind CSS configuration is not found in /Users/nik/frontend. You probably do not have Tailwind CSS installed or its configuration is incorrect. Install Tailwind CSS and try again. Visit https://tailwindcss.com/docs/guides/nextjs to get started.

You will need to still include the following: (do not remove it)

@tailwind base;
@tailwind components;
@tailwind utilities;

so CSS Tailwind validity check works.

[alfinauzikri]

@PassPuff You can solve the problem by downgrading to TailwindCSS v3. #6434

[stevenjburrows]

I upgraded Tailwind to v4 After that I wanted to install shadcn@latest
I get the error
npx shadcn@latest init -d ✔ Pre-flight checks. ✔ Checking framework. Found Next.js. ✖ CSS Tailwind validity check. ✔ Import alias validation.
The Tailwind CSS configuration is not found in /Users/nik/frontend. You probably do not have Tailwind CSS installed or its configuration is incorrect. Install Tailwind CSS and try again. Visit https://tailwindcss.com/docs/guides/nextjs to get started.

You will need to still include the following: (do not remove it)

@tailwind base;
@tailwind components;
@tailwind utilities;
so CSS Tailwind validity check works.

This never worked for me, I also had to add a tailwind.config.ts file to the root for it to work but I did add them just to make sure.

[bdrtsky]

You can't use Shadcn at least until Tailwind Merge support of Tailwind 4. As for CLI I think it could take even longer.

[cktang88]

Tailwind Merge support should be out in a few days according to dcastil/tailwind-merge#513

I expect to add support for it a few days after the Tailwind CSS v4 release. Most probably it will be a new major tailwind-merge version with the only breaking change being that it supports Tailwind CSS v4 instead of v3.