Tailwind V4 is WAY better than I expected

[@insayn01]

I couldn't stop imagining an old couple watching their son talk gibberish in their office from the door

[@thenewdesign]

Probably looks mentally ill to a non-techie

[@starnumber_alt]

Wait JS devs can be mentally sane?​@@thenewdesign

[@thenewdesign]

@@starnumber_alt If they tag themselves out of the grind into a vacation-like "product management" role, yes 😜

[@rslee]

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]

Compared to how I wrote CSS in the past this is nothing.

[@rslee]

@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.

[@invinciblemode]

@@rsleebut those variables now make it easy to integrate 3rd party UI libraries

[@rslee]

@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 😅

[@KevinVandyTech]

@@rslee I wonder if they will probably shake these out before the stable release

[@siya.abc123]

Bro dropped this video and also went live at the same time. Bro transcends through space-time

[@ristekostadinov2820]

to be fair the video takes time to upload and encode + youtube reviews etc

[@samiullahsheikh5015]

🤣🤣🤣🤣

[@A--_--M]

Bros desparate

[@haiffy]

It's called scheduling

[@rubyciide5542]

Smartest comment in this feed 💀🤡

[@tobiasjennerjahn8659]

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.

[@KarlOlofsson]

Haha, kudos for giving us tech news promptly, but don't ignore your parents too much 😁

[@shapelessed]

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...

[@zaneflow]

No more tailwind.config.mjs|ts|js|cjs 🥳

[@TheAntinity]

xd

[@yojou3695]

thank god

[@coolemur]

And that's not the best part of v4

[@tabletuser123]

what's so good about no longer needing tailwind.config.ts?

[@pokefreak2112]

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.

[@Noam-Bahar]

+1

[@JEsterCW]

Kinda tru, but the performance part is bs lmao. Never ever have seen any project having trouble with performance due to this aspect.

[@valtism]

Tailwind doesn't really have the architecture to support merging in a performant way. You're probably better off going with styleX

[@pokefreak2112]

​@@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

[@piaIy]

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.

[@WeAskToAI]

For a moment with a mic in hand you seemed Freddy Mercury but with stylish hair

[@xvrh]

EHHHHYO

[@robnobert]

Theo is gayer than ol' Freddy though... and I don't even think Theo likes men.

[@pepkin88]

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.

[@k-yo]

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.

[@iTz_Nao]

"I am too American to pronounce a German word. They lost the war, I don't have to respect their pronunciations" - Theo 2024

[@DanWolf-codeNerd]

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

[@KodeurKubik]

Speaking of a French word 💀

[@llllouis]

@@KodeurKubiknah he was talking about zustand not vite

[@iTz_Nao]

@@DanWolf-codeNerd whomp whomp

[@voidmind]

"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.

[@edwardallenthree]

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.

[@IStMl]

Vite ("veet") is the French word for fast

[@lapalu]

they lost the war, I don't have to respect their pronunciations

[@ShaqarudenGames]

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

[@darylbarnes9413]

That’s a CSS feature not Tailwind.

[@tommywheel]

Conic gradients are fantastic for rotating glows because they have an inflection point you can rotate the glow in animation

[@BlazeShomida]

22:19 it works up to .25, Adam Wathan did a video with Sam Selikoff on the v4 beta

[@modernkennnern]

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]

break why?

[@invinciblemode]

@@yojou3695things always break, when they do, you wish things were more explicit

[@modernkennnern]

@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

[@Exilum]

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.

[@Shadyljlove]

The maintainer of the zustand "btw, I read zus-tand as English (?) pronunciation." (c) dai-shi

[@akuoko_konadu]

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 😂

[@VeitLehmann]

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.

[@TheMASTERshadows]

Typing 4 on the keyboard without looking and getting it first try ... That's savage .

[@brennan123]

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.

[@chfr]

I am SO hyped by this

[@marcuss.abildskov7175]

I'm really enjoying Tailwind v4. It makes integration with other libraries easier because it's all CSS.

[@ryanogden1688]

Kill the prefixes. Just use regex for your find and replace; you’ll be fine 👍

[@imaprogrammer]

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.

[@DanielTorres-gd2uf]

Will this work with shadcn

[@yozhis1]

v5 tailwind will be just plain css. it goes in that way

[@vipero07]

Looks tailwind v4 behaves similarly to unocss

[@HHJoshHH]

Truly Tailwind V4 is a super dope upgrade! ❤

[@seccentral]

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 ?

[@kineticraft6977]

StyleX ?

[@seccentral]

@@kineticraft6977 thank you

[@RoyaltyInTraining.]

Looks like I started getting into Tailwind at exactly the right time

[@illiakyselov6913]

waiting for this version more than anything else it will unlock so many possibilities ❤

[@ayoubthegreat]

Looks great! Cant wait to use it

[@kengreeff]

Sick video, nice job

[@anuraglodhi63]

Can someone tell me how things written in rust run across different platforms? Don't you need different binaries for different platforms?

[@NighttimeJuneau]

I’m assuming it’d have to be that way, you’re compiling for different platforms and different executable formats

[@erik....]

Wow, this guy liked something he didn't make himself, that's insane.

[@dkr91]

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.

[@redstonewizard08]

12:20 EMI (Minecraft Mod): "am I a joke to you?"

[@kizigamer6895]

🤔

[@ValipPowa]

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?

[@edwardallenthree]

Think about that again.

[@JunIvanneDalman]

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.

[@JunIvanneDalman]

this solution already exists, tailwind mangle if u guys want

[@szmr]

What’s the keyboard at 0:30 ?

[@astrotoolau]

Theo keep repping those og skate brands 👍

[@thegrumpydeveloper]

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.

[@abdarker1043]

if tailwind config is gone then where to config corePlugins: { preflight: false, },

[@M-lt6kx]

Think it's now @layer base; and import the parts you need ie tailwindcss/utilities

[@IngwiePhoenix_nb]

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!

[@hundvd_7]

17:03 There's no fucking way it was supposed to be pronounced "vait"

[@Exilum]

26:20 I literally implemented this very thing in js after giving up on doing it in tailwind LAST WEEK

[@BleedingDev]

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? 🤔

[@mibaatwork]

Now tailwindCSS comes closer to UnoCSS!

[@devor8251]

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?

[@NighttimeJuneau]

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”.

[@devor8251]

@@NighttimeJuneau Completely? Maybe. Looks like Theo has one in his head.

[@gabrielkime6597]

CSS first configuration lets gooooo

[@LastLeg]

Is there no place for " ! important " any longer?

[@darylbarnes9413]

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.

[@iluha168]

this is incredible

[@snrmwg]

26:00 I also look very often into tailwind classes to pick the style 😁

[@RaphaelAlejandro]

I can’t keep up! Most of my codebase is still on Tailwind 2.0.

[@Dik131WZD]

Relax, dude, you are on vacation

[@mfpears]

27:03 Alright, it's finally time for me to take Tailwind seriously

[@mahmoudhelal9028]

idk but imo v4 is moving alot away from the pure css which will make use rly forgot how to write pure css

[@jactitation]

Is it CSS yet

[@HoNow222]

why is everything in this world always worse or better than you expected?

[@kineticraft6977]

Letting people define prefixes is going to result in emoji prefixes. Prepare yourselves.

[@bo_leang]

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?

[@abb0tt]

Bots are crazy right now on Windsurf marketing push.

[@zlatkoiliev8927]

Where are you recording this video from? Eastern European flat?!? 😂

[@d123-o8j]

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

[@asianck]

Pray the auto refactoring works out of the box lol

[@_pro_grammer_]

Ow my god 30 mins

[@lucishoffman]

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.

[@dvkerns]

I really dislike this change from bracketed variables, removing a big guardrail and compounding cognitive load. 💔

[@nerd3131]

It's a banger man

[@zaneflow]

Yes, it is!!

[@nguyennhatanh5261]

You making a game, a Bala-like maybe?

[@ramsey2155]

Damn, he really is getting used to making videos at his parents' house

[@timeforrice]

I thought he was about to sing Defying Gravity or something :D

[@garlicnator]

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.

[@jag_k]

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

[@aymenbachiri-yh2hd]

This is very usefull

[@gshard14]

imagine css is the new toml or yaml. unexpected turn of events. :/

[@jerondiovis6128]

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.

[@kiboo1212]

It was always supposed to be pronounced veet

[@h7hj59fh3f]

I don't like the config in CSS. That's yucky. 😭

[@DEVDerr]

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

[@DeepTitanic]

The biggest problem with vanilla css is that it doesn’t make TailWind Labs any money

[@__Mr.m__]

Hi

[@johnbakhmat]

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

[@Tyheir]

I don't like the arbitrary value changes.

[@nickpapadakis3258]

Airborne!

[@moot6794]

Wait, inline CSS in Next JS??

[@djblast101]

Tailwind will slowly just ship css and aay they invented it lol 🤣 Devs will jump hoops not to write some css

[@starnumber_alt]

17:14 vite is german

[@NighttimeJuneau]

Huh, no it isn’t? What would it mean in German?

[@lifeiscontent]

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

[@tristanjohn]

It's just CSS... it's not that serious. 😉

[@cod3r1337]

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.

[@hugmoretreez]

💀💀💀💀

[@Ollinho12]

Unnecessary rebuild

[@gro967]

Tailwind is not the fastest and was never. Tailwind was always known for being very slow, which was why WindiCSS more or less invented the JIT and just what you need compilation. Tailwind then just copied it and pretended as they would have come up with the current JIT themselves. For many years now, UnoCSS is much faster than Tailwind, supports much more syntaxes and doesn’t require any toolchain like postcss etc.. I have no idea, how Theo can seriously think that Tailwind is the fastest you can get and that any of the moderate speed that they have these days came from their own motivation or ideas…

[@Skorupa9]

So the AI spam-and-build apps will build shit content faster.

[@w_tchd0g]

meow

[@PpainX]

Bro can't post regular videos

[@jonhobbssmith]

"Less weird Tailwindisms and more real" - You know what's more real? Not using Tailwind in the first place and using real CSS!

[@日本語だけを聞くために-n3o]

You find out when tailwind is css: 😱😱😱😱

[@tsukinoko_kun]

I didn't expect anything so disrespectful from you, Theo. "I am too American to pronounce a German word. They lost the war, I don't have to respect their pronunciations".

[@NabekenProG87]

17:12 Felt to me like he was making a joke. He doesn't realy have a "tell" when he uses sarcasm

[@tsukinoko_kun]

@@NabekenProG87 Could be, and I hope so. But I felt uncomfortable with that statement.

[@AhmadMughal1]

he is a bit acoustic. his sarcasm never lands.

[@shubitoxX]

Yes that is just incredibly stupid, arrogant, ignorant and disrespectful comment. Current and future inhabitants of country xyz had no say in past inhabitants actions and the world is rarely black and white. And no, he is not joking. America will only respect Europe if Europe creates a European security architecture that includes Russia, China and anybody else. If the Americans behave arrogantly and turn their backs on Europe, we will have to develop our own economic and military strategy instead of playing the Americans' lapdog.

[@cod3r1337]

You mean, create a European security architecture that is strong enough to defend itself from threats from Russia and China without having to depend on one single unreliable ally. Right? That's what you must have meant by including Russia and China. Because you can't possibly have meant forging alliances with our biggest enemies.