Auto-generated transcript So Tailwind version 4 just came out a couple 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 and 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 like they say over here flex call span font bold you're going to be using the same old classes again and again which means you'll trigger this new rebuild with no new css 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 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 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 git ignore in your git ignore file because like if it's in your git ignore you probably 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 tailwind 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 breakpoint 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 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 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 going to duplicate this a bunch of times. And this is probably just a bad background color to use. 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 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's width and height to apply styles it will use the containers 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 width 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 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. If I switch it back, it turns into a flex row. So this is what container queries do. and the cool thing about this is that you can have 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 OK LCH 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 up but they came out like several months ago I just saw these now but yeah I'm gonna play around with this a lot in my own projects and should be fun that's all for today thank you for watching