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!
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.
Everything is pretty much the same for using it :D It's just the configuration that is totally different. I can make some simple tutorial for v4 if that would be good for you.
How the container will work? Like I am trying to add container and padding inside of it for the different display. But container is like it's not useable anymore. Tried with @utility too but no result
@@orcdev ok, what about padding ? Like declaring different padding on both side for different devices ?... Like we could declare those padding in Container before in tailwind.config.js.... as the file is not anymore than how
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!
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
@@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
It's exactly the same, just add `!` in front of the class like `!bg-red-500`. You can also add it in css file, like in normal css: background-color: red !important;
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 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.
@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
Join the Mighty Horde! Become a true WEB DEV WARRIOR! Subscribe! ⚔
Those animations appear to be incredibly valuable.
Yeah it looks awesome, still have to test it out. People are probably going to create wonders with it.
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!
Glad you enjoyed it! I love it too!
Can’t wait to start using these animations in some way :D
Such great news and incredibly helpful content. Thanks!
I’m glad you found the content helpful! Tailwind V4 really brings some exciting updates.
Amazing update!
@@anakravitz82 I love it!
Hey their i want use this with vite react but it gives me error on init cmd
What does it say? It should be even easier to upgrade with Vite
@orcdev ok I was search error it say downgrade your nose npm v it is to high
@@VivekTrend_Official Interesting, I am using version 11, it should be the latest. Which NPM version you had?
@orcdev node v was 22.13 and npm was 10.9.2
Could you recommend some tool for recording in windows, as screen studio is not available for windows?
OBS is nice, I used it before screen studio.
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.
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
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.
Everything is pretty much the same for using it :D It's just the configuration that is totally different.
I can make some simple tutorial for v4 if that would be good for you.
How the container will work? Like I am trying to add container and padding inside of it for the different display. But container is like it's not useable anymore. Tried with @utility too but no result
It should work like this:
@@orcdev ok, what about padding ? Like declaring different padding on both side for different devices ?... Like we could declare those padding in Container before in tailwind.config.js.... as the file is not anymore than how
thank you
You’re welcome!
Which software do you use for screen recording
It’s called Screen Studio, I love it! What do you think, is it good?
@ it’s super clean my friend, I like the cursor zooming on your videos, am inspired 😌
oh man this update is cool
It’s awesome!
Tailwind intellisense is not working with v4.0 as of now. Can anyone help me out with a similar extension ?
It's working for old classes, but not for new like animations etc
We have to wait for intellisense to support Tailwind v4
how to switch to dark and light mdoe now?
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%;
}
}
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!
Same here!
We have to wait for intellisense to update to support Tailwind v4.
Same for all eslint, prettier etc dependencies
@@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!
@ Awesome! It’s just not supporting new class names which they added in v4 like animations, shadow insets etc
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
Hey there!
That's interesting, it's not happening to me. Are you using this latest stable version? It was released yesterday.
@@orcdevYes
Used CLI method for installation
I thought that was easy
@@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
Are you on instagram?
Can you share profile
I'll dm you
I experienced the same things yesterday, I had to run the watch command again before I could see my custom font being applied 😥
How to use !important in tailwind version 4 ?
It's exactly the same, just add `!` in front of the class like `!bg-red-500`.
You can also add it in css file, like in normal css:
background-color: red !important;
Thankyou
You're welcome!
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
Yeah same here. I saw on X that they are working on it, it's probably going to be upgraded next week.
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 😥
@@warrenpeace2557 hahah never thought about this, but you gotta admit it’s simple to understand Tailwind :D
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.
Those are probably some heavy styled projects :D
What kind of errors do you have?
@@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.
@@orcdev actually i missed 1 info in the theme section.
@@nivekmozart6183 Is now everything working normally?
@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