What's new in Tailwind V4

So Tailwind version 4 just came out a couple of months ago, which in technology means it came out ages ago. But I just haven't had time to go over it because all of my projects use version 3. So I just never had the chance to look into it. But yeah, so it's out now and we're going to go over it. If you scroll down here, the first major improvement to Tailwind version 4 is the performance improvements. As you can see, a full build will be almost four times faster, an incremental rebuild with new CSS is almost nine times faster. And this is a crazier one. Incremental rebuild with no new CSS, as in you added no new classes to your code, no new CSS classes to your code. The build will be 182 times faster which is just absolutely insane. Now the neat part is that these incremental rebuilds with very little new CSS are going to be much more common the longer you work on a project. So the longer you work on a project you're going to be using the same classes again and again like they say over here flex, colspan, font-fold you're gonna be using the same old classes again and again which means you'll trigger this new rebuild with node-ucss again and again which means these builds will finish blazingly fast for you. The next thing I want to talk about is the fact that there is no tailwind.config.js file anymore. So if you remember in version 3 we had a tailwind.config.js file which had all of our Tailwind related configuration. We don't need that anymore. Instead we just add this import Tailwind CSS to our main CSS file and that's all we need now. So with just one line of code you can integrate Tailwind into your project now. No long configuration files, nothing like that. And along with this change there's another change, there's another major change, which is that If you remember in version 3 we had a content property in the config file where you had to specify the source for your code. And we don't have that anymore. Instead Tailwind will automatically figure out where your content lives in your code. And it does that by first of all ignoring all the files in your gitignore file. Because if it's in your gitignore you probably don't see it as code that you need to compile anyway. and it also ignores binary files like videos, images, zip files, exe files, etc. And by ignoring all of these files, it just scans everything else, and everything else tends to be your code. So there's no longer any need to specify the content property and tell it specifically where your code is. It can just do that automatically But if you do need to yeah here we are If you do need to specify an external source explicitly then you can use this source directive and then just specify the path to your source. So, yeah, a lot of Tailwind version 4 is just plug and play. You just install and you add one line of code and then you just start coding. There's no long configuration to do anymore. Now the next thing I want to talk about is that since there's no configuration file, all of the actual configuration that you need to do is moved back to your main CSS file. For example, if you want to change your theme, you want to change your colors or fonts or breakpoints, you do that by using the theme directive right here. So I do have an example over here. This is just a very small, very simple Tailwind Next.js project that I just spun up quickly. If you look over here, this is I'm using the theme directive here and creating some new colors and an extra break point for extra small screens at 480 pixels. Now what Tailwind is going to do is not only will it set these variables in its own internal configuration it will also set them to the root HTML element as native CSS variables like so so you just configure your theme like so and Tailwind would automatically turn them into these native CSS variables in the production code so in other words you'll also be able to use these variables directly in your other CSS code like for instance if you're using inline styles you'll be able to use this there and if you're using motion for animations or something like that you'll also be able to use it over there so just to show you an example really quickly if I go over here and I add a background and in the background I set the value to var color primary which is the same as the color I've set over here in the tailwind theme and if I check that as you can see I get that primary colors background over here. Tailwind will convert these into CSS variables which you can use in your code anywhere you want. Essentially this means that you'll be able to integrate tailwind with your other front-end tools that you're using. Next thing I want to discuss is the fact that Tailwind version 4 has dynamic values for utilities and variants and what this means is basically for instance in CSS grid you could only have 12 columns a maximum of 12 columns but now you can have as many columns as you want and for instance with other spacing properties like margin width height padding you can have arbitrary spacing values like these So just to show you a quick example in the code, I'm going to create a CSS grid and I'm going to give it 15 columns, let's say and by the way it shows me an intellisense autocomplete for 12 columns but not for 15 columns so this is not a native tailwind class but it is allowed in tailwind version 4. and i should fix this error first there we go and now i'll just add a couple children in here let's say and by the way we can also have arbitrary spacing for padding for width for height for anything we want so this is really cool and I'm just gonna duplicate this a bunch of times and this is probably just a bad background color to use let's do this black and there we go you can have as many columns as you want you can have any kind of padding margin that you want in here for instance i can use i can add any sort of margin like let's say i want to add a margin of 13 and that works now this is a a very very very useful feature to be sure but I still prefer to avoid arbitrary one-time values as much as I can in my code because that just makes my design much more clean and consistent if I use consistent spacing and consistent values instead of arbitrary values one-off values next thing I want to show is container queries which I absolutely love container queries here we go So basically container queries are like media queries but instead of using the viewport width and height to apply styles it will use the container's width to apply styles. And the container in this case is just an element that holds all your content. So they have a bunch of examples here but what I'm going to show you is this. I'm going to comment all of this and uncomment this. This is just a quick example I coded earlier to show you how container queries work. If you go over here, this is a profile card, and we're using Flexbox to arrange this. And this is currently in a flex column because we don't have a lot of width over here. Now if I do allow let say for Excel wait it turns into a flex row instead of a flex column so this is what container queries can do based on the width of the container and yeah as you can see it just switches on its own based on the width of the container and the container in this case is just this box based on the width of that it can change and apply styles as much as it wants so again just to show you this has a width of 4xl which is about 896 pixels if I reduce that again to how much is this 512 pixels it turns into a flex column I switch it back turns into a flex row So this is what container queries do. And the cool thing about this is that you can make your components much more responsive, irregardless of what the viewport size and settings are. So they can just be responsive on their own without relying on viewport size and width. Now, the final thing I want to discuss is that Tailwind v4 has an updated color palette. now the actual colors aren't really all that different from what they were before I've tried to look I've tried to tell the difference I just can't so all of these colors look just like version 3 and the versions before it but the major difference that I did spot was that they switched from using RGB colors to this new unit called OKLCH which I've never seen this before I have no idea honestly I have no idea what this unit does I don't know what advantages it has why it's better but basically they switched from RGB to this new unit other than that the colors are mostly the same and there's really no visible difference in the default tailwind colors the only thing they changed is the unit and honestly this is not something you will need to worry about really because if you're using custom colors you can use whatever unit you want and if you're using tailwind's default colors you don't really need to know the internal units and the values that they use you just use the color like all you need to do is just type something like bj primary or bj secondary or bj whatever and you don't need to know which units they use so this is really just an internal change in Tailwind's system. This is not something we need to worry about as developers. But yeah, those are the major changes according to me. There's a bunch of other stuff and I'll link the changelog in the description so you can check it out if you want. But yeah, some really cool exciting features just came out. I say just came out, but they came out like several months ago. I just saw these now. But yeah, I'm going to play around with this a lot in my own projects and should be fun. That's all for today. Thank you for watching.