The final minified build adds ~25kb to the CSS file compared to v3 because it outputs all of the config items as CSS variables regardless of whether you use them in your project or not. That's all of the default colors, shadows font sizes etc. Not a huge deal but something worth noting.
@k-yo yeah definitely not a make or break problem, just interesting because Tailwind 3 from 2 was about removing unused classes with the JIT compiler but now we've somewhat come full circle. No unnecessary classes but tons of variables most people won't even know exist.
I'm so happy that tailwind is under the stewardship that it is. I remember when it first gained traction there were so many salty devs that just could not see past the inline classes and deriled it as cluttered and unmaintainable. But they knew what they had and consistently improved it, converting a lot of people to it along the way. Now tailwind is so popular that an ecosystem of ui components has popped up around it, that are both easy to edit and intercompatible. How great is that. I recently had to go back into an old codebase to change something and working with those huge global css files with their mile-long class names because of global scopes is a certified pain in the ass. Also the Refactoring UI Book from the same guys is literally my design bible. I'm a programmer, not a designer, but simply reading through that book enabled me to create apps that just look and feel so much more cohesive than 90% of programmer art. Eternally grateful for those guys are providing to the dev community.
Funny now web was almost entirely self-contained for a while where all web development tools were built in web technologies, and then suddenly out of nowhere, every tool imaginable is using rust under the hood...
7:30 imo merging tailwind classes should be part of tailwind itself and done at compile time. It would require deeper integration with frameworks but the current pattern where people constantly recompute their classlist at runtime is an anti-pattern and can seriously hurt performance. And if you really need realtime style updates we already have a tool for that in CSS custom properties.
@@JEsterCW Whenever you have those micro lag spikes after hovering/clicking an element that's usually CSS compiling new shaders due to style changes, especially on low-end devices this can make your entire website feel sluggish. Usually it's not as bad as just having slow js but I can absolutely tell the difference between a lean website that uses CSS as intended and a "modern website" that bullies the CSS engine
I think both class merging and class variants (clsx, cva, etc.) were bad ideas from the start, it's unfortunate that component libraries like shadcn/ui popularized them. It feels like writing CSS-in-JS all over again, and destroys code locality and performance, whereas HTML and CSS had built-in solutions all along, like inline styles and attribute selectors (see semantic CSS, Kevin has a good video on it). It's best to avoid overwriting classes; using attributes for conditional styles is a better option because it doesn't require additional libraries, plus it improves accessibility and testing. And if you must overwrite, inline styles are fine. They also support dynamic values, which Tailwind doesn't.
Merging classes usually happens because we need to change the styles at runtime, often with a runtime condition. There's no way of knowing what the runtime will decide unless the tailwind compiler also understands your js which is impossible in practice
27:15 You know you can use CSS directly, right? Tailwind doesn't take away that ability. If there is something you want to use now, like font-stretch, use it now, no need to wait for Tailwind 4.
Yup. Arbitrary values and properties are there so that we can use it. A pain to write/read but with tailwind I rarely need to deal with any maintenance anyway. CSS grids are one example that I use arbitrary values all the time for content-based wrapping/breakpoints.
I am not thrilled with the idea of getting rid of my (as the commentor said, type safe) tailwind config. On the other hand, I already do several things in css in addition to tailwind, that put it at all in one file might, might, might be a better idea.
Didn’t talk about one of my favourite features! For gradients you can change the direction around the colour wheel in which the gradients colours are generated from
It was the least whiny complaining video I have seen from him in a while, but I am unsubscribing. He can't bring a positive discussion even when not complaining
22:00 It makes sense, tailwind already had .5 increments (in the -2.5 to 2.5 range). They're making it homogeneous so without removing the .5 in that range it has to be expanded to the entire range.
Some parts make sense like vars and theme definitions but non typed config and no code is a big downside to leaving js files. Think some small things could have still lived in js but I suppose just one place makes things easier.
"Vite" is the French word for "Fast", just like "Vue" is the French word for "View". As someone who's native language is French, I can confirm that you are pronouncing Vite correctly.
26:15 Theo that is so true, I am at a place where they don't use Tailwindcss, but most of the time I find myself on the tailwind docs just grabbing some css and throwing it in my project, tailwind is so good it helps other libraries and frameworks 😂
Nice CSS changes. My 2022 CSS framework already supported all of these v4 changes. Including all 3D transforms, arbitrary styling, sibling & descendant styling plus nested descendant styling. Gosh I miss working on that project. Might revisit it soon. - It's called EyeCSS by the way.
I can’t believe people sit around and wait for tailwind for CSS features that already exist and then praise Tailwind for letting them use things they could have already used if they weren’t dependent on Tailwind. . It’s like Stockholm syndrome.
Oh shut it would you? You can already use those "features" by simply using arbitrary classes... Newer Tailwind versions simply bake the newer CSS stuff in, but doesn't prevent you from using them anytime you want in older versions
Completely agree, tailwind is slowly merging back into css. This is a terrible upgrade for established projects, not because of the upgrade tools, but now developers have to remember what's available for tailwind 3 and tailwind 4 depending what project they are working on We've had this problem in tech before. The JS world is prevalent with ripping it up and starting again. Though the worst was probably Python 2.7 to Python 3
The tailwind config change is the very definition of a "cute" change. It's similar to "magic" (Which nextjs excels at); Neither of which I would classify as a good thing. Yes, they might _feel_ correct, but they will inevitably break and just make life for the developer much harder in the end.
@yojou3695 you never know, that's the problem. There's originally going to be some variant or something that just, for whatever reason, doesn't work. Happens with nextjs all the time, and while the tailwind config is certainly smaller in scope it's still quite big
I cant stress enough how much i hate moving away from a type safe config (which helps plugins, extensions a TON) to a fucking "magic" css file. Like, what? Hopefully they don't kill the js/ts way...
Looking back on it, there is one very obvious way for it to break, which SCSS struggles with atm: What if CSS adds the exact syntax that Tailwind uses? Tailwind would then either silently break or disallow us from using the new feature.
So they integrated a lot of features that I was missing, which was always the reason that I preferred writing actual CSS. But this looks like it's becoming really convoluted. At least as complex as writing CSS, but then, you're forced to do it with loads of new Tailwind classes that you have to become familiar with, instead of using standard CSS that works everywhere. I'm not sure if I like this.
Did they solve the problem so you can dynamically create your class names with string interpolation? White labeling or anything with dynamic theming support without requiring a rebuild would be a huge improvement.
Hey Theo, I like tailwind, no problem, but I've always had a better DX with "CSS in JS" and always loved working that way unlike tailwind(talking about at work in a big project). I am aware of the performance for CSS in JS. However, what is your take about the new hybrid approach CSS in JS libraries like KumaUI. There they generate static CSS files on build and leave the changeable dynamic parts in the JS.
Wish there was a component library ready for React/Preact because im too blind to design things xD Tailwind is great, I see the value but I literally do not "see" the output very well, lol. Great updates though!
Have you considered trying Windsurf Text Editor? In my experience, it offers a better user experience than Cursor Editor. Perhaps you could create a comparison video to evaluate their differences?
tailwind v4 seems way better than v3 but im wonder has anybody thought about making it so tailwind css gets turned into normal css when building so the source is cleaner when opening devtools?
that will make the class names longer tbh. better solution is to obfuscate the class names into something like x123gf. If tailwind want it, it can easily be configured in build process.
Great video. Ive used tailwind a little bit before when it came with next.js. I had no idea that tailwind could sometimes be faster then writing pure vanilla CSS.
Mmm, so do we all mostly agree that a 5-line string of unformatted code without syntax highlighting is okay, readable, and convenient? Or can we agree that 5 classes are enough, and if you need more, you should use CSS?
At least in VS Code, there’s a decent Tailwind extension that gives syntax highlighting and even suggestions, just completely removes that downside. You can even configure it to recognise strings passed to “cn” or “cva”.
Wow, css engines are still struggling to renovate when there Unocss has been existing for ages doing all the stuff you can imagine in windi, tailwind, nano.
I wonder will this release fix those stupid tw vars definitions on "*, before, after" instead of ":root", which makes styles inspector literally unusable, because everything inherits everything from everything. If it won't - tailwind may go straight back to the trashyard it currently is.
I think Tailwind MUST to add “prefix” for their at-directives. ‘Cause… come on, this is a not true CSS! I saw a lot of people who used className in HTML, and this is not a good think. CSS has @import and @media, but not @plugin or @variant. It can be frustrating
Theo, I didn't expect you to be so bigoted. That remark about Germans was not only extremely offensive, but also just not funny. If I were to go down to that level, I'd say something like: What to expect from someone from a country that just elected a dystopian fascist horror clown for president... again ... That's what I WOULD say, but I won't, because I'm not a bigot like that. Anyway, you lost my respect and subscription today.
Brightdata link for $15 Off: brightdata.com/?promo=t3gg
I couldn't stop imagining an old couple watching their son talk gibberish in their office from the door
Probably looks mentally ill to a non-techie
Wait JS devs can be mentally sane?@@thenewdesign
@@starnumber_alt If they tag themselves out of the grind into a vacation-like "product management" role, yes 😜
The final minified build adds ~25kb to the CSS file compared to v3 because it outputs all of the config items as CSS variables regardless of whether you use them in your project or not. That's all of the default colors, shadows font sizes etc. Not a huge deal but something worth noting.
Compared to how I wrote CSS in the past this is nothing.
@k-yo yeah definitely not a make or break problem, just interesting because Tailwind 3 from 2 was about removing unused classes with the JIT compiler but now we've somewhat come full circle. No unnecessary classes but tons of variables most people won't even know exist.
@@rsleebut those variables now make it easy to integrate 3rd party UI libraries
@invinciblemode I know the benefits of having the CSS variables. Although I don't why I would need --color-pink-200 for any of my projects 😅
@@rslee I wonder if they will probably shake these out before the stable release
Bro dropped this video and also went live at the same time. Bro transcends through space-time
to be fair the video takes time to upload and encode + youtube reviews etc
🤣🤣🤣🤣
Bros desparate
It's called scheduling
Smartest comment in this feed 💀🤡
I'm so happy that tailwind is under the stewardship that it is. I remember when it first gained traction there were so many salty devs that just could not see past the inline classes and deriled it as cluttered and unmaintainable. But they knew what they had and consistently improved it, converting a lot of people to it along the way. Now tailwind is so popular that an ecosystem of ui components has popped up around it, that are both easy to edit and intercompatible. How great is that. I recently had to go back into an old codebase to change something and working with those huge global css files with their mile-long class names because of global scopes is a certified pain in the ass.
Also the Refactoring UI Book from the same guys is literally my design bible. I'm a programmer, not a designer, but simply reading through that book enabled me to create apps that just look and feel so much more cohesive than 90% of programmer art. Eternally grateful for those guys are providing to the dev community.
I used to be that salty dev once upon a time haha
Funny now web was almost entirely self-contained for a while where all web development tools were built in web technologies, and then suddenly out of nowhere, every tool imaginable is using rust under the hood...
7:30 imo merging tailwind classes should be part of tailwind itself and done at compile time. It would require deeper integration with frameworks but the current pattern where people constantly recompute their classlist at runtime is an anti-pattern and can seriously hurt performance. And if you really need realtime style updates we already have a tool for that in CSS custom properties.
+1
Tailwind doesn't really have the architecture to support merging in a performant way. You're probably better off going with styleX
@@JEsterCW Whenever you have those micro lag spikes after hovering/clicking an element that's usually CSS compiling new shaders due to style changes, especially on low-end devices this can make your entire website feel sluggish.
Usually it's not as bad as just having slow js but I can absolutely tell the difference between a lean website that uses CSS as intended and a "modern website" that bullies the CSS engine
I think both class merging and class variants (clsx, cva, etc.) were bad ideas from the start, it's unfortunate that component libraries like shadcn/ui popularized them. It feels like writing CSS-in-JS all over again, and destroys code locality and performance, whereas HTML and CSS had built-in solutions all along, like inline styles and attribute selectors (see semantic CSS, Kevin has a good video on it). It's best to avoid overwriting classes; using attributes for conditional styles is a better option because it doesn't require additional libraries, plus it improves accessibility and testing. And if you must overwrite, inline styles are fine. They also support dynamic values, which Tailwind doesn't.
Merging classes usually happens because we need to change the styles at runtime, often with a runtime condition. There's no way of knowing what the runtime will decide unless the tailwind compiler also understands your js which is impossible in practice
27:15 You know you can use CSS directly, right? Tailwind doesn't take away that ability. If there is something you want to use now, like font-stretch, use it now, no need to wait for Tailwind 4.
Yup. Arbitrary values and properties are there so that we can use it. A pain to write/read but with tailwind I rarely need to deal with any maintenance anyway. CSS grids are one example that I use arbitrary values all the time for content-based wrapping/breakpoints.
No more tailwind.config.mjs|ts|js|cjs 🥳
xd
thank god
And that's not the best part of v4
what's so good about no longer needing tailwind.config.ts?
Haha, kudos for giving us tech news promptly, but don't ignore your parents too much 😁
For a moment with a mic in hand you seemed Freddy Mercury but with stylish hair
EHHHHYO
Theo is gayer than ol' Freddy though... and I don't even think Theo likes men.
I am not thrilled with the idea of getting rid of my (as the commentor said, type safe) tailwind config.
On the other hand, I already do several things in css in addition to tailwind, that put it at all in one file might, might, might be a better idea.
Didn’t talk about one of my favourite features! For gradients you can change the direction around the colour wheel in which the gradients colours are generated from
That’s a CSS feature not Tailwind.
"I am too American to pronounce a German word. They lost the war, I don't have to respect their pronunciations"
- Theo 2024
It was the least whiny complaining video I have seen from him in a while, but I am unsubscribing. He can't bring a positive discussion even when not complaining
Speaking of a French word 💀
@@KodeurKubiknah he was talking about zustand not vite
@@DanWolf-codeNerd whomp whomp
I probably don't like full CSS config with all magical @rules. In TS I have type-checking for plugins. Who's gonna add it to CSS? 🤔
22:00 It makes sense, tailwind already had .5 increments (in the -2.5 to 2.5 range). They're making it homogeneous so without removing the .5 in that range it has to be expanded to the entire range.
Conic gradients are fantastic for rotating glows because they have an inflection point you can rotate the glow in animation
I really dislike this change from bracketed variables, removing a big guardrail and compounding cognitive load. 💔
22:19 it works up to .25, Adam Wathan did a video with Sam Selikoff on the v4 beta
Vite ("veet") is the French word for fast
they lost the war, I don't have to respect their pronunciations
.... the French won the war
@@lapalu France has the best military record in History. Whatever country you're from, your army is less successful. It's very simple.
Some parts make sense like vars and theme definitions but non typed config and no code is a big downside to leaving js files. Think some small things could have still lived in js but I suppose just one place makes things easier.
"Vite" is the French word for "Fast", just like "Vue" is the French word for "View". As someone who's native language is French, I can confirm that you are pronouncing Vite correctly.
The maintainer of the zustand
"btw, I read zus-tand as English (?) pronunciation." (c) dai-shi
I actually liked having a config file since it's also type-safe, so I don't have to look into the docs that often.
Most of the rest looks dope though.
26:15 Theo that is so true, I am at a place where they don't use Tailwindcss, but most of the time I find myself on the tailwind docs just grabbing some css and throwing it in my project, tailwind is so good it helps other libraries and frameworks 😂
Nice CSS changes. My 2022 CSS framework already supported all of these v4 changes. Including all 3D transforms, arbitrary styling, sibling & descendant styling plus nested descendant styling. Gosh I miss working on that project. Might revisit it soon. - It's called EyeCSS by the way.
I am SO hyped by this
waiting for this version more than anything else
it will unlock so many possibilities ❤
Truly Tailwind V4 is a super dope upgrade! ❤
Looks like I started getting into Tailwind at exactly the right time
I can’t believe people sit around and wait for tailwind for CSS features that already exist and then praise Tailwind for letting them use things they could have already used if they weren’t dependent on Tailwind. . It’s like Stockholm syndrome.
Oh shut it would you? You can already use those "features" by simply using arbitrary classes... Newer Tailwind versions simply bake the newer CSS stuff in, but doesn't prevent you from using them anytime you want in older versions
Completely agree, tailwind is slowly merging back into css. This is a terrible upgrade for established projects, not because of the upgrade tools, but now developers have to remember what's available for tailwind 3 and tailwind 4 depending what project they are working on
We've had this problem in tech before. The JS world is prevalent with ripping it up and starting again.
Though the worst was probably Python 2.7 to Python 3
The tailwind config change is the very definition of a "cute" change. It's similar to "magic" (Which nextjs excels at); Neither of which I would classify as a good thing. Yes, they might _feel_ correct, but they will inevitably break and just make life for the developer much harder in the end.
break why?
@@yojou3695things always break, when they do, you wish things were more explicit
@yojou3695 you never know, that's the problem. There's originally going to be some variant or something that just, for whatever reason, doesn't work. Happens with nextjs all the time, and while the tailwind config is certainly smaller in scope it's still quite big
I cant stress enough how much i hate moving away from a type safe config (which helps plugins, extensions a TON) to a fucking "magic" css file. Like, what? Hopefully they don't kill the js/ts way...
Looking back on it, there is one very obvious way for it to break, which SCSS struggles with atm:
What if CSS adds the exact syntax that Tailwind uses? Tailwind would then either silently break or disallow us from using the new feature.
Looks great! Cant wait to use it
I'm really enjoying Tailwind v4. It makes integration with other libraries easier because it's all CSS.
So they integrated a lot of features that I was missing, which was always the reason that I preferred writing actual CSS. But this looks like it's becoming really convoluted. At least as complex as writing CSS, but then, you're forced to do it with loads of new Tailwind classes that you have to become familiar with, instead of using standard CSS that works everywhere. I'm not sure if I like this.
You did mis understand the @min @max thing. That was about container queries. You could already to max-lg:hidden for instance since a few TW versions.
Theo keep repping those og skate brands 👍
12:20 EMI (Minecraft Mod): "am I a joke to you?"
🤔
Did they solve the problem so you can dynamically create your class names with string interpolation? White labeling or anything with dynamic theming support without requiring a rebuild would be a huge improvement.
Sick video, nice job
Typing 4 on the keyboard without looking and getting it first try ... That's savage .
Kill the prefixes. Just use regex for your find and replace; you’ll be fine 👍
26:20 I literally implemented this very thing in js after giving up on doing it in tailwind LAST WEEK
There is a bit of a problem in the same project while v3 is 136 kb in v4 it is 209 kb.
The moment v3 compiled at 38ms and then 42ms 😂😂
26:00 I also look very often into tailwind classes to pick the style 😁
Hey Theo, I like tailwind, no problem, but I've always had a better DX with "CSS in JS" and always loved working that way unlike tailwind(talking about at work in a big project). I am aware of the performance for CSS in JS. However, what is your take about the new hybrid approach CSS in JS libraries like KumaUI. There they generate static CSS files on build and leave the changeable dynamic parts in the JS.
Looks tailwind v4 behaves similarly to unocss
Will this work with shadcn
this is incredible
Wish there was a component library ready for React/Preact because im too blind to design things xD Tailwind is great, I see the value but I literally do not "see" the output very well, lol.
Great updates though!
I didn't get the name of the lib/framework theo is comparing tailwind with at around @1:50. Can anyone tell me how to write that name ?
StyleX ?
@@kineticraft6977 thank you
Now tailwindCSS comes closer to UnoCSS!
What’s the keyboard at 0:30 ?
Someone should come up with a shorthander syntax to help with the 'ugliness' of all the classes?
Is there no place for " ! important " any longer?
27:03 Alright, it's finally time for me to take Tailwind seriously
Have you considered trying Windsurf Text Editor? In my experience, it offers a better user experience than Cursor Editor. Perhaps you could create a comparison video to evaluate their differences?
Bots are crazy right now on Windsurf marketing push.
tailwind v4 seems way better than v3 but im wonder has anybody thought about making it so tailwind css gets turned into normal css when building so the source is cleaner when opening devtools?
Think about that again.
that will make the class names longer tbh. better solution is to obfuscate the class names into something like x123gf. If tailwind want it, it can easily be configured in build process.
this solution already exists, tailwind mangle if u guys want
You can get around this issue with the atomic CSS extension
v5 tailwind will be just plain css. it goes in that way
17:03 There's no fucking way it was supposed to be pronounced "vait"
Relax, dude, you are on vacation
Can someone tell me how things written in rust run across different platforms? Don't you need different binaries for different platforms?
I’m assuming it’d have to be that way, you’re compiling for different platforms and different executable formats
I'm not looking forward to refactoring my existing app to tw4. I'm going to need to start a tech debt list soon :D
Pray the auto refactoring works out of the box lol
It's a banger man
Great video.
Ive used tailwind a little bit before when it came with next.js.
I had no idea that tailwind could sometimes be faster then writing pure vanilla CSS.
Mmm, so do we all mostly agree that a 5-line string of unformatted code without syntax highlighting is okay, readable, and convenient? Or can we agree that 5 classes are enough, and if you need more, you should use CSS?
At least in VS Code, there’s a decent Tailwind extension that gives syntax highlighting and even suggestions, just completely removes that downside. You can even configure it to recognise strings passed to “cn” or “cva”.
@@NighttimeJuneau Completely? Maybe. Looks like Theo has one in his head.
I thought he was about to sing Defying Gravity or something :D
if tailwind config is gone then where to config
corePlugins: {
preflight: false,
},
You making a game, a Bala-like maybe?
Yes, it is!!
idk but imo v4 is moving alot away from the pure css which will make use rly forgot how to write pure css
Ow my god 30 mins
I can’t keep up! Most of my codebase is still on Tailwind 2.0.
CSS first configuration lets gooooo
Is it CSS yet
Where are you recording this video from? Eastern European flat?!? 😂
This is very usefull
Letting people define prefixes is going to result in emoji prefixes. Prepare yourselves.
why is everything in this world always worse or better than you expected?
Damn, he really is getting used to making videos at his parents' house
Wow, css engines are still struggling to renovate when there Unocss has been existing for ages doing all the stuff you can imagine in windi, tailwind, nano.
Wow, this guy liked something he didn't make himself, that's insane.
"Less weird Tailwindisms and more real" - You know what's more real? Not using Tailwind in the first place and using real CSS!
imagine css is the new toml or yaml. unexpected turn of events. :/
I wonder will this release fix those stupid tw vars definitions on "*, before, after" instead of ":root", which makes styles inspector literally unusable, because everything inherits everything from everything.
If it won't - tailwind may go straight back to the trashyard it currently is.
It was always supposed to be pronounced veet
The biggest problem with vanilla css is that it doesn’t make TailWind Labs any money
I don't like the config in CSS. That's yucky. 😭
Today's CSS is kinda good for writing configs. It became so good that even TJ started to write an OCaml compiler for writing Neovim config in CSS xD
17:14 vite is german
Huh, no it isn’t? What would it mean in German?
I think Tailwind MUST to add “prefix” for their at-directives. ‘Cause… come on, this is a not true CSS! I saw a lot of people who used className in HTML, and this is not a good think. CSS has @import and @media, but not @plugin or @variant. It can be frustrating
Idk why, but your parent's studio looks better then your own studio. Even tho it has a weird yellow lighting, it has some comfy, warm vibes
I don't like the arbitrary value changes.
Wait, inline CSS in Next JS??
Airborne!
Hi
you can avoid the class name merging by just.... not doing it! style is a function of state, className in a react component is an anti-pattern
Tailwind will slowly just ship css and aay they invented it lol 🤣
Devs will jump hoops not to write some css
Theo, I didn't expect you to be so bigoted. That remark about Germans was not only extremely offensive, but also just not funny. If I were to go down to that level, I'd say something like: What to expect from someone from a country that just elected a dystopian fascist horror clown for president... again ... That's what I WOULD say, but I won't, because I'm not a bigot like that.
Anyway, you lost my respect and subscription today.
💀💀💀💀
It's just CSS... it's not that serious. 😉