Tailwind V4 is STABLE! What’s New & How to Upgrade!

[@orcdev]

Join the Mighty Horde! Become a true WEB DEV WARRIOR! Subscribe! ⚔

[@AIDragonMusic]

Those animations appear to be incredibly valuable.

[@orcdev]

Yeah it looks awesome, still have to test it out. People are probably going to create wonders with it.

[@bilalbeny4172]

Fantastic overview of Tailwind CSS v4! The new high-performance engine and streamlined configuration process are game-changers. The automatic content detection and CSS-first configuration make setup a breeze. Excited to leverage these enhancements in upcoming projects. Thanks for the insightful breakdown!

[@orcdev]

Glad you enjoyed it! I love it too! Can’t wait to start using these animations in some way :D

[@KidspirationStation]

Such great news and incredibly helpful content. Thanks!

[@orcdev]

I’m glad you found the content helpful! Tailwind V4 really brings some exciting updates.

[@anakravitz82]

Amazing update!

[@orcdev]

@@anakravitz82 I love it!

[@VivekTrend_Official]

Hey their i want use this with vite react but it gives me error on init cmd

[@orcdev]

What does it say? It should be even easier to upgrade with Vite

[@VivekTrend_Official]

@orcdev ok I was search error it say downgrade your nose npm v it is to high

[@PelaeloMatabane]

Ohhh my, as a new learner of Tailwind, all the things I learnt last week have changed😭😭, I need someone to upload a tutorial using this new version.

[@anselum540]

Could you recommend some tool for recording in windows, as screen studio is not available for windows?

[@orcdev]

OBS is nice, I used it before screen studio.

[@bilalbeny4172]

One more problem: I went to sleep, and when I woke up, everything with Tailwind CSS seemed messy. Now that the `tailwind.config.js` has removed(no more needed) in this version, I'm not sure how to use the DaisyUI plugin with Tailwind CSS anymore.

[@orcdev]

Yeah basically all those dependencies need to be updated, we're probably going to wait a week or two for all those guys to upgrade :D

[@mubzly]

Which software do you use for screen recording

[@orcdev]

It’s called Screen Studio, I love it! What do you think, is it good?

[@mubzly]

@ it’s super clean my friend, I like the cursor zooming on your videos, am inspired 😌

[@maaritswanderlust]

thank you

[@orcdev]

You’re welcome!

[@FrappGiveaways]

oh man this update is cool

[@orcdev]

It’s awesome!

[@archit80]

Tailwind intellisense is not working with v4.0 as of now. Can anyone help me out with a similar extension ?

[@orcdev]

It's working for old classes, but not for new like animations etc We have to wait for intellisense to support Tailwind v4

[@Rahul_Khandekar]

I have a doubt Earlier version we would use .....--watch for observation of all js html files only once..... I have been using TSv4 from few days..... Problem im facing is i have to run --watch command every time If i make change in html..... Please help

[@orcdev]

Hey there! That's interesting, it's not happening to me. Are you using this latest stable version? It was released yesterday.

[@Rahul_Khandekar]

​@@orcdevYes Used CLI method for installation I thought that was easy

[@orcdev]

@@Rahul_Khandekar Yeah it is easy, weird that it's not working. Can you give me some piece of code so I can try and recreate it on my side? Maybe I can help out if I succeed :D

[@Rahul_Khandekar]

Are you on instagram? Can you share profile I'll dm you

[@PelaeloMatabane]

I experienced the same things yesterday, I had to run the watch command again before I could see my custom font being applied 😥

[@sujalkumarnitj1881]

how to switch to dark and light mdoe now?

[@orcdev]

Everything can be controlled from the css file, that one is same like before. You can check globals.css from Shadcn how they handle it: @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 142.1 76.2% 36.3%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 142.1 76.2% 36.3%; --radius: 0.5rem; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; } .dark { --background: 20 14.3% 4.1%; --foreground: 0 0% 95%; --card: 24 9.8% 10%; --card-foreground: 0 0% 95%; --popover: 0 0% 9%; --popover-foreground: 0 0% 95%; --primary: 142.1 70.6% 45.3%; --primary-foreground: 144.9 80.4% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; --accent: 12 6.5% 15.1%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 142.4 71.8% 29.2%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } }

[@bilalbeny4172]

I’m currently facing an issue after installing Tailwind CSS v4. The Tailwind CSS IntelliSense extension in VS Code no longer provides autocomplete suggestions for classes. Has anyone else experienced this problem? Could this be due to breaking changes in Tailwind CSS v4? If you’ve encountered this issue and found a solution, I’d really appreciate your help. Thank you in advance!

[@orcdev]

Same here! We have to wait for intellisense to update to support Tailwind v4. Same for all eslint, prettier etc dependencies

[@bilalbeny4172]

@@orcdev Thanks, it's working for me now! I just closed VS Code and reopened it, and voilà-the Tailwind CSS IntelliSense is back to life!

[@orcdev]

@ Awesome! It’s just not supporting new class names which they added in v4 like animations, shadow insets etc

[@recipesbunker]

Thankyou

[@orcdev]

You're welcome!

[@Tanner-cz4bd]

I’m gonna kinda wait for the shadcn guys to update before I use it personally It’s like my default way to use tailwind these days

[@orcdev]

Yeah same here. I saw on X that they are working on it, it's probably going to be upgraded next week.

[@warrenpeace2557]

is there any updates for this.. "hover:do-something hover:🤡 hover:do-something-extra" ... apollo was landed without internet. but tailwind cant provide pseudo selector chaining 😥

[@orcdev]

@@warrenpeace2557 hahah never thought about this, but you gotta admit it’s simple to understand Tailwind :D

[@nivekmozart6183]

stable is a joke. errors flooding on my end which is i hope they can fix them. i have 100+ sites needs to remodel because of this release.

[@orcdev]

Those are probably some heavy styled projects :D What kind of errors do you have?

[@nivekmozart6183]

@@orcdev i think the root cause i found is removing tailwind.config.js. they called this one less file but this file is the most important of all. you get error if you have this in your folder.

[@nivekmozart6183]

@@orcdev actually i missed 1 info in the theme section.

[@orcdev]

@@nivekmozart6183 Is now everything working normally?

[@nivekmozart6183]

​@orcdev yes, it worked fined but i still have to modify a bit in class that has opacity. Before I have `bg-opacity-30` and after updates, i can write it as `bg-opacity/30`. hopefully i won't encounter bugs migrating the tailwind.config.js to @theme