Tailwind CSS V4 is SO Good!

✨ Become a Frontend FYI PRO today via www.frontend.fyi/pro - PRO is a single time purchase lifetime plan, giving you access to all courses and other paid content I will create! Right now the first parts of my Framer Motion course have already released!
I just really love Tailwind, I know.. But did you know that with this alpha release Tailwind just became even more "Just CSS™"? Let me take you through what's new, and what got me so excited about this new version! It's all about CSS variables and other modern CSS techniques, and I'm here for it!
🔗 Links
- Tailwind CSS V4 Release post: tailwindcss.com/blog/tailwind...
- Tailwind CSS V4 Default Theme: github.com/tailwindlabs/tailw...
- Simon Swiss' first experiments with V4: / 1765461831643234752
- Adam Argyle's Open Props: open-props.style/
Timestamps:
00:00 - Intro
00:22 - First look at blog post
03:58 - Experiment with v4 ourselves
08:34 - Outro
#tailwindcss #frontend #webdevelopment #css

[@bren.r]

Tailwind at this point isn't "just a library". It's become the gold standard in virtually every project or production site nowadays.

[@frontendfyi]

It sure is!! I'm enjoying it a LOT

[@xfuttex]

So amazing with getting rid of that Tailwind configuration file! Amazing job Tailwind theme!

[@mariolim96]

This new features are massive!

[@hipdev_]

Thanks Jeroen!, on point as always.

[@frontendfyi]

Thanks Julian! Hope you’re doing good, miss you in discord man!

[@kolyan4d]

Very cool review 👍

[@farhan-app]

This is awesome!!!

[@OleksandrPanteli]

content as great as always

[@frontendfyi]

Thank you!

[@maxwebstudio]

Excited by ths new features and configuration. Though this one is a breaking update. I wonder how things like DaisyUI will handle the update.

[@ssshenkie]

I'm curious how they've updated the language server to detect that Tailwind is installed 🤔 before it was as easy as just checking if tailwind config existed

[@real-oppenheimer]

Why were there so many classes/utilities in the tag you've shown (e.g. at 7:37)? Before, we only included the styles that were used (via content in the Tailwind config), but now it seems that everything was included instead?

[@BobRossRightHand]

I'm also curious why, maybe a alpha bug or he have other files not show that uses those classes?

[@TailwindLabs]

There are no classes or utilities in that style tag, those are just the CSS variables for your theme 👍🏻 We make those all available by default so you can reference them anywhere else you may need them, but it's possible to suppress them if that's not what you want.

[@real-oppenheimer]

@@TailwindLabsNaturally I thought that only the CSS variables are included that are actually used - exactly how classes/utilities worked via the "content" field before.

[@proteus1]

I tried using tailwind and it's good. I have an question as when I upload a single page to the server that the page required is index or tailwind?

[@oddcelot]

i was wondering about tailwind + open props for a while now… open props v2 is in the works already and has some good stuff lined up

[@frontendfyi]

Open props is a very cool project indeed! All credits to Simon for thinking of combining the two in an example ❤️

[@littleoddboy]

first of all, thank you a lot due to this amazing video. I think tailwindcss is going to be more css-style. you know, in the past and v3 and others, we've to configure everything with JavsScript, it's good right? but as a front-end developer and in that time - the time that you want to code the design, not the functionality - I just want to be in the html/css world! and tailwindcss v4 is going to be crazy with this idea. again, thank you for this video!

[@ikhsan_345]

Hello, friend. Mind if review tenoxui css too? It's worth it

[@manikantaprasadlopinti8375]

Please create a vedio how to load configuration on a http request..so i can get theme from backend

[@thephilosopher699]

Which fonts you are using in vsCode?

[@frontendfyi]

The font is called Recursive Mono Casual Static

[@deadlylive_gaming7154]

nice updates man

[@vlad_pantyukhin]

Great video! 👏What font are you using for VS Code? 😅

[@frontendfyi]

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

[@vlad_pantyukhin]

@@frontendfyi Thanks Jeroen! 😌

[@naranyala_dev]

embrace modern css, awesome

[@wlockuz4467]

How do the plugins work now? I have a project with Tailwind config that has Javascript in it to support dynamic updates, something Tailwind doesn't support out of the box. I hope the config is opt-in because its really convenient.

[@frontendfyi]

I believe they are still working on the plugin support - but the goal is that you can configure everything in the CSS file. Check Adam's twitter account, I even think he shared a tweet about what that looks like.

[@DuongNguyen-ok1qt]

Thank Jeroenl, which plugin support autocomplete? I tried the same but lost suggestion.

[@frontendfyi]

It's Tailwind's own plugin, but you have to make sure that you upgrade to their prerelease version, it should be a button if you navigate to the extension install page. Let me know if you found it!

[@MudassirKhan-sx9jy]

what font are you using for you editor. nice video btw.

[@geeksy2278]

Wanna know too! Looks smooth!

[@frontendfyi]

The font is called Recursive Mono Casual Static

[@damar1967]

Though I'm not using Tailwind CSS anymore because I now use UnoCSS, I always try to follow any Tailwind news in case they have a groundbreaking update. I'm not missing anything out so far

[@frontendfyi]

I think you're right! It's quite comparable right? Any specific things you like more about UnoCSS vs Tailwind? I haven't played around with UnoCSS myself yet because it indeed looked so similar.

[@chankailoon]

What if I want all the existing colors and font size available in development but not in production? Isn't tailwind going to tree shake any unused classes in build?

[@frontendfyi]

Absolutely, tailwind will still remove anything you don’t use! It’s more of a consistency in your design - if you work in a team with a designer as well, you want to create a subset of colors that you use, and keep on using. You then don’t want your team members to suddenly start using 9 grey colors if you only use 2 in your site. So having a theme that only has the colors for your project, helps in that consistency.

[@djmtype]

How do you remove the @base? Added an empty object `@layer base {}` in the css file doesn't do it.

[@frontendfyi]

You import each “tailwindcss/[layer]” you want individually instead of the all in one “tailwindcss”. I believe Adam tweeted about it somewhere, but can’t find it right now.

[@Pareshbpatel]

Nice overview of Tailwing V4. Thanks. {2024-06-04}

[@Htbaa]

Hmm, am I right that by default Tailwindcss will include all color variables even if you use them or not? It doesn't do that in v3 (as they're not variables), but if so why would it include all that extra bulk? Wasn't Tailwind supposed to only include what's being used?

[@frontendfyi]

I believe this is true for now yeah! I see many people asking the same questions, so this might still change towards the final version. I kinda get why they do this, but I also understand that most people don't want to have these variables in there if they don't use it - just like with the utility classes. Those utility classes are all still removed on build time by the way. That hasn't changed.

[@murtza.rehman]

I guess I should wait until v4 to migrate my less css variables to tailwind css variables since then I could simply copy them over to .css file and not need to know about tailwind config file which would be obsolete by then, right ?

[@frontendfyi]

That kinda makes sense yeah. Although there's not too much extra to learn when using the theme vs variables, you still need to know their naming convention. So on the other hand.. Why wait any longer to try it right? I at least really enjoy working with it!

[@murtza.rehman]

Yes good idea to try it now to transition into v4@@frontendfyi

[@planesrift]

Thank you. Configuration file hell is the cancer of frontend development.

[@user-nw5xq8dq7r]

which font are u using ?

[@frontendfyi]

The font is called Recursive Mono Casual Static

[@rencesalaveria2301]

what is your font?

[@frontendfyi]

The font is called Recursive Mono Casual Static

[@rencesalaveria2301]

thanks!

[@backupmemories897]

this makes daisyui obsolete the theming part..

[@alii4334]

how are we going to add plugings?

[@imnash21]

Your theme name?

[@frontendfyi]

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

[@imnash21]

@@frontendfyi Thank you!

[@Lemmy4555]

I'm waiting for tailwind to support custom class names so that you can do: .my-comp { background-color: red } hello!

[@Voidstroyer]

I don't really understand what you are asking for. What you seem to be describing is just vanilla css which you can already use alongside tailwind. Nothing is stopping you from literally writing .my-comp { background-color: red } inside your css file and using the class in your html.

[@NewTypeStarling]

Fr​@@Voidstroyer

[@beomc4539]

So, if Tailwind is becoming more and more like CSS with every version, why not just use modern CSS?

[@frontendfyi]

Nothing wrong with modern CSS indeed! There's just a few things I like about Tailwind that CSS don't (fully) bring yet. But again, nothing wrong with modern CSS. On the contrary even, modern CSS gained many great new features lately.

[@maskedvillainai]

I despise the man who thought ir was okay to contradict the definition of CSS by coming up with some brand name that has no relevance to its purpose and there to confuse everyone. It’s like saying you prefer a frying pan food over just food food, now I gotta refer to the tool I use each time I reference what I ate

[@frontendfyi]

I’m really trying to get your point, but somehow I don’t. Really curious what you mean!

[@wishmeheaven]

​@@frontendfyi a wild guess here: He meant that in order to use a few style variables, theTailwind structure/configuration requires you to import a ton of others... Sounds reasonable? (...Either the argument or the structure)

[@Daktyl198]

I’ve tried tailwind several times, and I just can’t seem to understand why people like it so much. It seems like an interesting project, but for me it just felt like I was making my code uglier and being less productive at the same time (though I imagine that second part work go away if I used it more). Is tailwind anything other than inline css with a predefined “theme”?

[@frontendfyi]

I’ve also tried it maybe 10 times, decided it sucked and went back to all other tools I loved. Until one day it sticked and I really like it. Yes it’s ugly, but it also brings me so much joy in being able to quickly create components because of colocation, not writing the same utility classes / styles over and over, and so much more. In some ways it is exactly like inline styles, but without many of the downsides inline styles of course being. I fully get your point though! I guess you just have to keep trying it every now and then? Haha. Hope it was a little bit helpful to you.

[@frontendfyi]

Alright, I decided this explanation still wasn't complet, so I dug up a message I wrote in Dutch with the benefits I see in Tailwind, and Translated it to English for you. It's just a list of the first things that came to mind when a friend asked a similar question a while back. Hope it's helpful! - Utility first CSS makes your CSS more consistent in general, so I was already using a similar approach in my own CSS before - Co-location of styles and HTML (jsx) is super nice and productive. (Of course you can also have this by for example using Astro, or other ways) - The Tailwind Autocomplete and linting makes you SUPER fast. It immediately shows you which classes are available, and which things are in your theme. If you'd make your own utility first CSS you can't create such thing easily, and thus making it harder to onboard new devs - they have to learn your "css language" first. Closest you might be able to get to this is a well typed Styled Components setup? - I'm not afraid anymore to delete code. I know what is in use and what isn't. Where as in any other CSS approach you're always afraid to delete stuff (especially if you're not the only one on a project, or if I built some styles while I was drunk a few months ago). Too often people abuse a CSS class meant for one thing in a whole other place. And of course you shouldn't do that, but over a decade of experience shows me it happens too often.. - I literally don't need to move my cursor if I need to write CSS or HTML. I can just type in one go, and that saves me a lot of time. - ml-3 is super ugly, but it's also so much quicker to write than something like margin-left: var(--space-3);. And because of tailwinds autocomplete again, the language is quite easy to learn, and once you grasp it you gain all these speed benefits. And suddenly making frontend becomes so much quicker. (biggest downside might be that people want to go too quick, and don't think about optimizing code anymore and make it a mess..)

[@Daktyl198]

@@frontendfyi thank you for the detailed write up. It made me sort of come to a realization of why I think it doesn’t mesh well with me, and that’s because I use Svelte as a framework. Because of that, other than my global “theme” css, every custom bit of css I need to write is small, and paired directly inside of a style tag in the component’s own file. Therefore, most of tailwind’s benefits are lost on my small to medium sized projects because Svelte already solves them.

[@frontendfyi]

That indeed makes a lot of sense! One of the biggest things you might then be missing out on is a nice autocomplete of your theme's variables, which hopefully are share across you components? Besides that, if you make very small components inside a svelte file, there is indeed a lot less reason to use tailwind in my opinion!

[@avwie132]

Soooo…. Just css

[@statuschannel8572]

yeah yeah! without specifiCity iSSue, Class naming iSSue, performanCe iSSue and more

[@prashlovessamosa]

Please make some content for KZbin.

[@frontendfyi]

Recorded a new rebuild again. 4,5 hours source material 🙏 On YT soon.

[@stephenkamenar]

"simply add the tailwind css plugin, that is all you need to do now!" bro, what. that is not the only thing you need to do. it is not "just css" you need build tools, vite, node, npm. will probably throw errors when you try to use this project in the future. so dumb. would be nice if it was just a css file ...... imagine that. then mabye i'd use it

[@frontendfyi]

Fair point, there's indeed more involved. Not sure if I think that is bad though. We've already left the days where we didn't need any other tools almost a decade ago, when things like Grunt came around. I mean.. I'm glad I don't need to minify my CSS files manually anymore.

[@stephenkamenar]

@@frontendfyi i still haven't used a single build tool. one of the best decisions i've made. all of my projects are simple to understand and maintain, even the very very old ones

[@syed.simanta820]

Improve your premium course

[@frontendfyi]

Working on it ❤️ Updates soon!

[@ralpha112]

Tailwind is overrated.

[@CURIOSITYcapital]

No it is not...i have never used vanilla css after learning tailwindcss