Tailwind V4 Is Bigger Than Expected 👀

[@ts8960]

i like how rust developers exist just to take all the pain and give better DX to javascript developers lol

[@Flackon]

Writing JS is its own pain

[@anonymousalexander6005]

Delayed pain vs delayed gratification. All the kids use JS, all the femboys use Rust 😎.

[@coolemur976]

@@anonymousalexander6005 Dude just called whole IT industry a 'kid'

[@Justcallmelouis]

It’s a food chain 😅

[@AndrieMC]

​@@anonymousalexander6005bro just called all the youtube, twich, microsoft, google, etc etc website developers kids

[@rand0mtv660]

I think Devon Govett, the creator of Parcel and Lightning CSS does not get the praise he deserves. It's amazing what he can do. He is also working on React Aria and React Spectrum. Basically he is a 10x developer for real.

[@ianchristian23]

i praise him a lot

[@jacksonbourne]

Those first paragraphs were definitely not run-on sentences, they flow perfectly fine to be honest.

[@miletadulovic577]

Love that they are using variables for customization now. Great idea

[@dealloc]

Yeah, until those tokens are specified in JSON format, e.g. from a node module. Makes it a more cumbersome for that case.

[@jacoblockwood4034]

@@dealloc Well, it's a new version of the Tailwind, and this is a breaking change, so if a node module is exporting their tokens as a node module, they should update to the new version and start exporting as CSS. But yeah I agree it is a bit more inconvenient, that's why there's still support for JS config

[@huge_letters]

Curious how you're supposed to do programmatic stuff then - like currently I have a function to generate all the 50-950 color variants for me. How do I do that in css file? Use sass?

[@dealloc]

@@huge_letters Depends. There are better ways to generate tokens for different formats. One solution is to conform to the Design Token spec and use tools to generate to the desired formats for you. That way you also get two-way integration with design tools like Figma, Sketch, etc. and keep them synced without tying it to specific platforms or formats. For hobby projects that may be overkill, and in such cases I'd either stick with the JS config, or just copy-paste values as-needed, since it's often overkill to spend too much time on these decisions in such cases. I would personally pre-compile colors and tokens (e.g. through a command) and not generate at runtime as it adds overhead for no reason.

[@JamesQQuick]

Such an exciting release. Can't wait to actually use this!

[@rand0mtv660]

To be honest I never thought Tailwind was slow. Compiling other things in projects will definitely always be slower than Tailwind. Although cannot complain if they are making it even faster. Any performance improvement is welcome.

[@snuglife3697]

I suppose the time has come to abandon my styled components (I'm trapped in a glass case of emotion)

[@leotravel85]

I see what you did there

[@follantic]

I remember using Emotion, Styled and Radium all in the same project. With Redux and Mobx of course. I'm older and more scar(r)ed now. Which is why I'm not using Tailwind. It's also why I'm more on the backend these days.

[@follantic]

Radium was the best.

[@pretty-coffee]

I actually use both, tailwindcss for most styling and if I hit a wall I just use emotion js. Not sure how "good" this is tho.

[@follantic]

@@pretty-coffee If it gets the job done that's pri 1. Pri 2 is whether you'd hate yourself for making a choice 5-10 years from now (abandonment, build tooling evolution, etc). That's why I'm ok with styled-components, but aprehensive about tailwind. While there is an escape hatch (just use the css), it's not ideal. Styled components or React are way safer bets (though I prefer SolidJS).

[@ky3ow]

11:20 its not about "state of css tooling", because this should be handled by tailwind language server, so they just have to implement theese diagnostics

[@royportillo]

Very excited to see V4 when it becomes stable. Personally, smoothing out the integration issues with NextJS is where I’m going to look out for. However, everything else you showed here is already very amazing and great move forward.

[@kabukitheater9046]

rust mentioned

[@MrMoonCraft]

This video was hard to watch. Only a minute in, and you're just complaining about the dudes grammar. I didn't want to watch this video for your opinion on how good this guys english is, I wanted to see what the tailwind release had in store. I won't be watching the rest of your video, thanks for linking the blog post so I can read it myself 👍

[@HomenP-q4v]

We need more rust in javascript ecosystem.

[@mchisolm0]

Would definitely be interested in more coverage of Tailwind v4. Thanks for sharing!

[@bates64]

Wtf is with all the Rust hate from Theo? This idea that it's impossible for people to learn Rust or contribute to Rust software is silly

[@TurtleKwitty]

Well I'll be damned there's a satisfies keyword in typescript now??? Useful, thanks for the useful bit Theo

[@theblckbird]

3:22 keep in mind that they’re comparing their most optimized JS version to their new not that much optimized Rust version!

[@bugged1212]

A lot of the css var stuff already works in tailwind, you just need to define it in the tailwind config. But yeah, this should make it more transparent.

[@radomane]

I love the improvements to color, that has been a big pain point for me the last 2 years. I would really like to see tailwind moving more towards being more customizable/extensible. I really believe solutions like TailwindUI and shadcnUI are the future. I love using it, but I still have to rewrite a lot of the class names to support our non-standard color theme, spacing and other tweaks. Also customization the Typography(prose) config is fucking impossible. We use a font which requires a different font size, line height and weight than the default, at every size. I’ve spent a couple of hours looking at the source code, but I still can’t get it to work perfectly.

[@ThatDereKid]

It is not impossible, it is just difficult to find examples online. Mostly because the TW Typography plugin is a completely different use case. You want to use the addUtilities function in your them to create typography classes. You can put media queries in them as well to fully abstract away the choices made by your design system on font-size, line-height, etc. based on breakpoint.

[@AndrewPetersonGameDev]

I should start using Tailwind (for my website written in Rust)

[@luca4479]

Leptos + tailwind is nice

[@xpk.creative]

Very promising. I made my own plugins to enable color-mix for alpha channel modification, never liked -color-hsl: 200deg 20% 98% just to get it work with bg-color/50. Looking forward to it

[@icesentry]

Theo, you of all people should know how js hate sucks. Please don't do the same with rust. I get it, you had a bad experience with it, but me and many other devs have shipped on time with rust.

[@TheStone190]

I'd love to hear more about tailwind

[@rpWeb3]

lets just use rust for everything.. UI, backend, Beds, Kitchen , Cars, Cats, Coffee, Glasses, Hoodies, Socks, Bacon, etc... :p

[@derciojds]

The new JavaScript

[@araozu]

​@@derciojds but actually a really good language 🤣🤣

[@ErrorBorn]

Or use Mojo. But I’m just a Chris Lattner fan

[@bryson2662]

Those are perfectly fine sentences. They're not run-ons

[@BlazeShomida]

I literally just started on a project a couple days ago that returns a plugin and twColors and twTokens based on a config in Typescript. Essentially it would turn into the following. Twilight for twilight css, to help with theming like light and dark mode. The plugin would have all your css custom properties for your primitives and themes. Although now that tailwind's gonna be native css custom properties my project might not be needed since you'd be able to just redefine the variables under a media query/selector. one nice thing is with my config you get autocomplete and typesafety. export const { twilightColors, twilightExtends, twilightPlugin } = createTwilight(primitives, themes); import { twilightColors, twilightExtends, twilightPlugin, } from "./twilight-config"; export default { content: ["src/**/*.html"], theme: { colors: { ...twilightColors, }, extend: { ...twilightExtends, }, }, plugins: [twilightPlugin], };

[@lcarsos]

"Rust where it counts" this (not just in rust) is something the whole industry needs to get better at. Doing whole ground up rewrites will doom your project. Learn to start landing beachheads into the most critical parts of your codebase, and interop with your it's-not-legacy code.

[@re.liable]

I am more interested in improvements with the VSCode extension. I'm a really junior dev but the biggest pain points that I share with our team are: - Getting the extension to know about custom classes. I/We have been getting by with Tailwind plugins but they're rather ugly (literal CSS in JS) - Getting the Intellisense outside of the "normal" class contexts, e.g. in variables. There's an experimental class regex setting but being experimental keeps us on edge by default - As of writing this comment the extension still needs a config file to actually work. This is annoying for me personally in my "throwaway" projects in which I only link the CDN package. Since v4 is going to make config-less possible, it's pretty likely the extension is going to be updated as well, and I hope it'll also come with other features

[@markeggers8356]

Welcome to the James Fennimore Cooper school of writing. Sentences are paragraphs, and a paragraph is a page in length.

[@balduin_b4334]

i am so hyped for v4, postcss gifted us some problems in our monorepo

[@theblckbird]

Those long sentences are very normal in German

[@actionscripted]

They are in American English, too. A sentence that wraps a few lines isn’t necessarily a run on and some authors like Nathaniel Hawthorne would write correct sentences that spanned half a page.

[@joestrkr]

Using the module graph from Vite could be huge, especially for component libraries.

[@tjaytje]

At this point Tailwind is going from an tool to a framework that defeats the purpose. Just get creative with class names its part of your job so don't complain. At this point its easier to write plain CSS then write inline styles like tailwind.

[@azizsafudin]

Easier to write plain CSS? Maybe. Easier to maintain? Fuck no.

[@ThatDereKid]

Nope. In a FAANG codebase without scoped styling you have to have QA team regress a page every time you change you remove or override a class.

[@nickadams2361]

literally reading an article lol

[@LadyEmilyNyx]

So they named the new render engine written in in Rust, "Oxide". Cute. Also I'm embarrassed that this video spent 3 months on my 'watch later' playlist. I really meant to get to it sooner.

[@pk-mh2cx]

What is the Screen Recoding tool used for this video? I am interested in how to achieve this clean setup with no browser toolbar, frames and side camera window. Looks very neat

[@adriablancafort]

Awesome progress!

[@ziacodes]

I was expecting CSS Logical Properties

[@TheDarkOneSC2]

At this point we might as well just switch entirely to Rust for WebDev stuff

[@RolandAyala]

@0:32. Wow.

[@AllysonTS]

Theo did u tried the Catalyst UI from Tailwind Labs? There's no content about it, i don't if worth it.

[@maxijonson]

Literally just started trying out Tailwind 2 days ago. I'm one of those devs that stayed away from it because of the huge classNames, but I keep seeing "you have to actually try it to understand". So that's what I'm finally doing. How big are these changes to experienced Tailwind users? How much should I expect my current (very small) understanding of it to change? 👀

[@tinrab]

Lmao, what's that attitude towards Rust? It's amazing, you should learn it.

[@WesternSpace]

For content. Divisive opinions generate the views. Go watch his Rust video and just cringe.

[@gro967]

Maybe it gets as fast as UnoCSS at some point. That really feels instant and it's not even based on Rust, just very good TS code. Feels a little bit like they are trying to fix their bad code by introducing Rust...

[@flwi]

Nice! Looking forward to trying this out in my next project. Thanks for sharing! Btw: what browser are you using? I like that the tabs are on the left (and on demand). Allows you to read more of the title when you have lots of them.

[@Archikuus]

its arc browser, i tried it but for development it felt terrible

[@vasiovasio]

Oxide is Fantastic! ❤❤❤

[@nilskaspersson]

This is clearly great software, but I still can't understand why I should learn Tailwind syntax when I could just write CSS Modules. The potential benefits are so tangential.

[@zayne-sarutobi]

To each their own I suppose. Personally, I truly disdain context switching for something as minute as css

[@rand0mtv660]

Try it, you might like it. I worked with CSS Modules for last 3-4 years and switched to Tailwind in last 6 months or so and would never go back. Syntax is nothing special, it's really not that different compared to actual CSS properties so it's not like you are learning a totally separate language. It's one thing watching videos, reading about something, but it's a totally different thing trying it out. Don't dismiss it until you evaluated it properly.

[@srki22]

So, you have css module for every component? Isn't it better than for everyting to be in the same file?

[@jitxhere]

I can relate to the initial resistance but just try it once. I was too just into modules but twcss is just awesome

[@jacksoncougar]

You had 100 lines in the config. Pour a cup of coffee and get it done lol

[@nemeziz_prime]

What browser is being used in this video? Looks pretty sleek

[@sashaulycode]

Arc Browser, I think it's macos only for now

[@DavidWTube]

Im so thankful for Rust and have no understanding of the language.

[@Noritoshi-r8m]

I dream for a Javascript++ written in Rust

[@sarthakmalhotra7912]

They can do all of that but having variant grouping is still not achieved(internally).

[@alexandru26]

Soo now they use lightning css to parse,auto prefix and minify instead of post css with auto prefix and nanocss

[@ApacheGamingUK]

The zero configuration and no content paths settings scare me. I'm using Tailwind with Blazor.

[@27sosite73]

T3 stack going to exist without planetscale we are migrating to Turso?

[@yashsolanki069]

Why does the new change remind me of scss+bem way of writing styles ?

[@mokhosh]

i started using it but the auto detect didn't detect my view files

[@harshmakwanaa]

how is that arc logo different?

[@ZeroRegretz]

Arc's early access program. New update coming

[@undertale-15075O]

Vannila Css ❤ One love 💞

[@rredington305]

Tailwind is for intelligent, hard-working developers who don't mind typing their fingers blue. Tried it, and I'm way too lazy to use Tailwind. I'd rather stick to MUI, so much easier and less typing 😂

[@SandraWantsCoke]

I don't think many care about build time whether it's 0.5 seconds or 0.03 seconds...

[@FaraazAhmad]

Do they finally support drop-shadow?

[@studyingturtle2726]

what is the name of the browser you use?

[@MrDragos360]

What browser does he uses ?

[@xXYourShadowDaniXx]

Whats the popup search application Theo is using?

[@naufalfarras2213]

he was using arc browser, it has built in search command palette

[@lancemarchetti8673]

Is moving from Bootstrap to Tailwind a huge learning curve? Or is there stuff that Tailwind can do better than Bootstrap?

[@TheOriginalBlueKirby]

They are not comparable.

[@Lucas-gt8en]

Tailwind is closer to plain CSS than to Bootstrap so it mostly depends on how comfortable you are with CSS. Then again I picked it up when I was mostly using Bootstrap and Material Design and the documentation was so good I quickly picked up CSS via Tailwind. Regarding capabilities: Tailwind allows you to very quickly and easily build your own version of ‘btn’ and ‘card’ etc. It’s basically as capable as vanilla CSS

[@xrexy]

Bootstrap is so much harder and overcomplicated compared to Tailwind. Tailwind is just CSS with classes. Also yes, tailwind does everything better

[@TheOriginalBlueKirby]

@@xrexy CSS already has classes, so no. Not even close.

[@xrexy]

@@TheOriginalBlueKirby What??? CSS has classes???? What are you gonna tell me next, maybe the sky is blue?

[@pablomayobre]

They tell you it has a vite plugin and you test with Next the only framework not using Vite by now? come on...

[@phojie6868]

UNOCSS > TAILWIND, should give review to Unocss instead of TW

[@deadchannel8431]

Unocss just manual tailwind

[@devZone7]

That's cool !

[@timmyvegas]

These thumbnails are ridiculous. You’d swear he’s announcing the end of the world, and really it’s just css loll

[@netdoom]

Wait until you just write simple css modules and realize you really never needed to use tailwind Just write raw sql. Just build on raw react. Trust me, it’ll change your life.

[@tjaytje]

Yeah people now a days rather use over engineerd tools then actually learn the basic.

[@VeniMitev]

Just build on raw JS, not even TS. Go big or go home. React is over-engineered

[@azizsafudin]

All these hobbyist solo devs who have never worked on a team giving “advise”. 🙄

[@filemot25]

Raw React 😂

[@cothfi]

How much do you get from Tailwind? I applied for their shilling position too but no one replied :/

[@frontend_ko]

I dont like making my codes look complicated with lengthy classname

[@azizsafudin]

That complexity has to reside SOMEWHERE. What better place than the markup itself.

[@Caldaron]

nah dude oklch is pronounced ocklock

[@DigitalKelvin]

Those aren't run-ons.

[@vanweerd]

long sentences != run on sentences

[@HomenP-q4v]

Noice

[@ArthurMudrick]

Есть нормальный CSS с препроцессором SCSS, есть нормальный BEM или CSS-модули... нет же, недоучки будут теперь учить Tailwind-синтаксис вместо CSS.

[@sylum3]

Why would I choose this over styled-components?

[@srymisclick]

Oh boy, grab the 🍿

[@syno6412]

60 seconds in and already insufferable

[@1Bishop]

RUST BABY! WOOOO 🦀

[@ob34915]

They need to stop creating front end Framework no one cares anymore

[@shapelessed]

To be honest, I always sort of hated the whole CSS library thing that's been going on in the web space. I know, they are great for fast prototyping, except they're bad for fast refactoring and changes. They are great to keep consistency across the project, except for when you have an objectively better idea how to do something, in which case you're screwed, because now all the styles are fighting with each other in a huge glorified mess of CSS crap.

[@pavlovalor]

Even v44 won’t change the fact it’s for fishies unable to learn css 😂

[@Person-who-exists]

Tailwind 4 makes you html bigger than thought

[@akay64x2]

Maybe I am old school, but I never liked Tailwind or the type of code it produces.

[@srki22]

I was on the same page but then I changed my mind. Tailwin team researched and used all scientifically proven knowledge about color schemes, typography etc. to come up with the list of css classes instead od letting you use all the custom sizes and colors. You can read a lot about that on their blog. I was amazed when I read it. And even after learning that, I still didn't like it for a long time, because for me it was better to use css selector nav>li, if I wanted for example to change the style of all navigation lists on my site, instead of changing tailwind classes in all of them separately. However, the re-use problem with tailwind is not an issue if you use a framework (e.g. React) where you can make a NavList component that you can re-use accross your site by passing different props (item list, orientation etc.). So if you don't use new school JS frameworks, it is fine to stick with the old way of thinking, which is to separate content (HTML) from presentation (CSS). But if you use a framework where you define your reusable components then it is good to use Tailwind instead of changing CSS in your defined class without knowing if you broke some other component that used the same css class.

[@derciojds]

And you're not alone

[@buc991]

i hate tailwind, with this plague every project turned into unreadable mess of inline abbreviations, impossible to maintain and change something, how is this better then normal css or scss

[@xrexy]

Tell me you've never worked with other developers without telling me

[@tjaytje]

@@xrexytell me you never worked with real developers thaty know the basics without telling me.

[@xrexy]

@@tjaytje It's not about knowing the "basics". It's about how CSS is nowhere ideal for bigger projects.

[@xrexy]

Also the inline mess argument never fails to make me laugh. With CSS you just hide the "mess" in another place behind a selector

[@aldierygonzalez7249]

People are arguing in the replies but let me take a real crack at showing you why people like tailwind over css classes. If i were to sum up the main benefits, Id say its for the colocation, speed of development, and its predictability Colocation: This is what everyone tends to hate tailwind for and I get it to a degree, it can 3x-10x the size of your html tags. The reason people enjoy it is because when you first get started, it feels like you have to learn a whole new way of writing css, but the tailwind team has put a ton of effort into making the process as close to writing real css as possible. Id say, if you try it, youd be able to read and reason about tailwind code in about an hour. Speed: Like I said earlier Tailwind has a TON of tooling around it such as class sorting and intelisense with really good fuzzy search in all major editors. This makes the css abbreviations really efficient mentally for me. I type flexc and flex-col will be my first result. I have memorized these patterns over time, but starting up i didnt really have to memorize it either. Ive probably checked the documentation maybe 3-5 times in my life? But since I dont have to name anything and just write the classes I want, it becomes so much faster to write and maintain. Need to turn a parent div into a flex? You are one click and four keystrokes away from that, instead of going go the correct css file and finding the classname, which you may have forgotten and changing the display to flex. Predictability: This one is my favorite. Now i would like to preface this with the idea that if you are not using a composable/component architecture, Tailwind is not the solution for you. If that was the case, i would fully agree about your points on maintainability and readability. But when you actually work on tailwind on a component, say maybe 50-100 lines of code, it becomes really easy to maintain. It benefits you a lot to right correct semantic html too but in my opinion its not necessary. When i want to change something or I see something breaking, I can usually narrow it down to a component->tag level immediately, and now since my classes are in a predictable order, I can usually predict exactly where in the codebase I need to look all before I have seen the code. It becomes a massive win in large teams for this reason. Weve all had team members write garbage code and css, and put it in the wrong file, and then put it in a weird spot where they relied on cascading and specificity, then it inevitably breaks on the next change. Those are the worst to debug. That goes away with tailwind. I completely understand your concerns about readability, as it definitely is a hurdle. I think its one to generally overcome easily though, as when your html is readable, your classnames come second to that. And if you know where you need to go in terms of the html, you find yourself at or near the line where your css that broke the html is. No need to change your mind because of this, but really try it for a quick tester app, it really makes the skill floor for good css go way up, while still achievable, making junior devs much more reliable.

[@oleksiistri8429]

i think all this so called "frameworks" are full of shit, we do not need 100 of frontend frameworks, just use css

[@TheVibeCurator]

“It’s all Rust” 😭😭