[feat]: Adapting new Tailwind CSS v4.0 Beta

[rafadlis]

Feature description

Why adapting?

The public release of Tailwind CSS v4.0 Beta is out, and I am thrilled with the new performance enhancements and features. There are so many global CSS features I'm excited to use, such as:

• 3D Transform
• field-sizing utilities
• Linear Gradient

The speed improvements are also quite impressive

It still requires some configuration to achieve that performance.

Hope you adapting this beta version

maybe you can add new choose to using tailwindcss v4.0 or a way to update to this version

Affected component/components

Tailwind CSS

Additional Context

Check out the Theo react video for more insights.

Before submitting

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

[wraith4081]

The most significant change in the latest version that affected this project is removing the creation of JavaScript configuration by default. This alteration will affect the project (and even now does), necessitating a decision regarding its future use. One option is to halt its implementation, while an alternative would be to devise a configuration generator to merge it into the CSS file. While adapting to these changes may be straightforward, the recent release raises the question of whether it would be early to adopt them. Updating class names will be easy once the config adapting process is finished.

[nrjdalal]

for now, if you guys want to use tailwind v4 compatible with any new or existing app, it is pretty simple

just run the codemod -

npx @tailwindcss/upgrade@next

so now the thing is you won't be able to add new components, as there won't be tailwind.config.js/ts anymore, so how do you add new components to your app?

just create a temporary new project and run -

npx shadcn@latest init -d
npx shadcn@latest add -a
npx @tailwindcss/upgrade@next

and voila, you have a new tailwind v4 version of the components and css, just copy and paste required content

---

if you wish to get this task automated, via CLI tool, feel free to emojify this comment and I will make one

[nrjdalal]

I have made a minimalist CLI tool that creates a shadcn-tailwindcss-v4 project in your current working directory or by the name of shadcnext in an existing directory

you can use it to start a new project, or reference latest components in an existing v4 project

npx shadcnext@latest create

let me know if it works for you peeps

https://github.com/nrjdalal/shadcnext

[CHC383]

I didn't use all of the shadcn/ui components and features, but I was able to run the ones I am using with Tailwind CSS v4 by

• Running Tailwind CSS upgrade command to update CSS classes
• Migrate tailwind.config file to CSS config. I am using Daisy UI for theme color so my changes don't match the values from the shadcn/ui templates, but you get the ideas. Please see Can I use this library with shadcn/ui? saadeghi/daisyui#2140 (comment)

[nrjdalal]

https://github.com/nrjdalal/awesome-templates/tree/main/next.js-apps/next.js-shadcn-taliwind-v4

here is the reference template for it, config with tailwind v4, component classes compatible with v4

code for components can be easily referenced from src/components/ui, and components will always be latest, cuz

it's auto updated every 8 hours, go nuts y'all! 🔥

--- more ---

for now, if you guys want to use tailwind v4 compatible with any new or existing app, it is pretty simple

just run the codemod -

npx @tailwindcss/upgrade@next
so now the thing is you won't be able to add new components, as there won't be tailwind.config.js/ts anymore, so how do you add new components to your app?

just create a temporary new project and run -

npx shadcn@latest init -d
npx shadcn@latest add -a
npx @tailwindcss/upgrade@next
and voila, you have a new tailwind v4 version of the components and css, just copy and paste required content

if you wish to get this task automated, via CLI tool, feel free to emojify this comment and I will make one

[aleksa-codes]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

[seawatts]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

I just started seeing this when I updated to the release version of 4.0.0. Don't have time to look into it at the moment but will monitor this thread.

Have you opened an issue anywhere else? Like on tailwindcss-animate? Or tailwindcss?

[aleksa-codes]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

I just started seeing this when I updated to the release version of 4.0.0. Don't have time to look into it at the moment but will monitor this thread.

Have you opened an issue anywhere else? Like on tailwindcss-animate? Or tailwindcss?

Ok, thanks.

No, I have not opened an issue anywhere else, tailwindcss-animate also doesn't seem to be maintained anymore. So maybe only other place would be tailwindcss.

[abhi2425]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

You can just remove these two classes from DialogContent component data-[state=open]:slide-in-from-left-1/2 [state=closed]:slide-out-to-left-1/2 It should fix the animation issue happening in v4, although animation is not gonna be same as it was in tailwind v3 but it it still better then sliding from the corner.

[CHC383]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

Another option is jamiebuilds/tailwindcss-animate#63 (comment)

[aleksa-codes]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

Another option is jamiebuilds/tailwindcss-animate#63 (comment)

Thanks. This gave me the same result as the solution recommended by @abhi2425 to remove the state classes from the DialogContent component, but like he mentioned the effect is still not the same as the original with Tailwindcss v3. Also seems like for the v4 the Default style that was using tailwindcss-animate was deprecated and only New York will exist: #6585

So, this might be the only viable solution for v4 and Default style.

Edit: If there is a way to migrate easily to new-york style and not use tailwindcss-animate anymore, that might be the best solution going forward, for existing projects

Edit2: testing out canary version looks like new-york style now uses tailwindcss-animate, so what I said doesn't apply... I guess we will see. Right now I am migrating by deleting components.json and running npx shadcn@canary init and then manually updating every component from https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui

[kurumeii]

Is anyone else experiencing Dialog component opening and closing in top-left direction? after the upgrade to Tailwind v4? Not sure if it is related to tailwindcss-animate or what.

Another option is jamiebuilds/tailwindcss-animate#63 (comment)

me personally would use this

[DannyM1chael]

data-[state=open]:slide-in-from-left-1/2

And remove data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]