Since this course was initially built on Tailwind CSS version 3, let's take a look at the blog post announcing the release of Tailwind CSS version 4 so that we can take a look at some of the differences. Now, we've already highlighted many of the most important ones with new videos that we've injected throughout the rest of the course, but let's just get a high level overview and summary in this final lesson of what has changed between the two. just so you know what all is available. So this is the blog post that Tailwind announced the new version, version 4N.
One of the first things that it mentions is that the new Tailwind engine is more high performance. They've taken everything they've learned about the architecture over the years and optimize it to be as fast as possible. 5 times faster and incremental builds being over 8 times faster. It's also been designed for the modern web, meaning that it takes advantage of several new features the web has to offer in CSS land.
Things such as the layer directive, giving us more control than ever over how the cascade works, as well as the property directive. which makes it possible to do things like animate gradients and significantly improve performance on large pages. They've also taken advantage of the built-in color mix function, allowing them to adjust the opacity of any color value, including CSS variables and current color, logical properties simplifying right-to-left support, and other things such as that. They've also simplified the installation process.
We already went through that. in detail in an earlier video, it can now be installed via a first-party Veed plugin, which we also used in that video. Another cool feature is that the content is automatically detected. If you're used to working in Tailwind CSS version 3, you'll know that you had to declare which folders and files your classes were used in.
No more. That's all automatic for you. 0, if you wanted to inline other CSS files using at import, you'd have to configure another plugin like the post-CSS import plugin. Now, though, Tailwind handles this out of the box.
js file. We have a complete video dedicated to that earlier on in the course. All of the CSS theme variables that you define in your theme config can also be used as normal custom CSS properties, as ultimately that theme generates something like this. 0 by effectively allowing them to accept certain types of arbitrary values without the need for any configuration, meaning you could do things like create custom grid sizes, out of the box, or target boolean data attributes without needing to define them.
Even spacing utilities like px, mt, w, and h are now dynamically derived from a single spacing scale variable and can accept any value out of the box. As mentioned in an earlier lesson, the color palette is now all defined with the OKLCH function, which takes advantage of the wider gamut to make the colors more vivid where they were limited by the sRGB color space. TELEN CSS version 4 also ships container queries out of the box, which we also dove into more detail in in an earlier lesson. Finally, TELEN's added some new 3D transform utilities, things like RotateX, RotateY, ScaleZ, and TranslateZ, meaning you could achieve designs like this with your TELEN utility classes.
They've also expanded gradient APIs so that you can create gradients at any angle that you'd like. They've also added gradient interpolation modifiers so that a class like BG Linear2RSRGB can interpolate using sRGB and the BG Linear2ROKLCH can interpolate using that color model. Why is this useful? Well, using polar color spaces like OKLCH or HSL can lead to much more vivid gradients when the from and to color stops are far apart on the color wheel.
They've also added support for conic and radial gradients. There's a new starting variant that adds support for the new CSS at starting style feature. If you're familiar with the view transition component appear prop, then this does basically the same. The added not variant adds support for the CSS not pseudo class and can be compared with a dash with any other variant.
It also does double duty, letting you negate media queries and supports queries. Finally, there's a ton more new utilities and variants, things like inset shadow and inset ring, field sizing, color scheme, font stretch, inert. Nth Variance, which the post says is for doing really clever things you'll eventually regret. I can totally see that happening.
Invariance, popover open, and descendant variance. Hopefully this video has been a useful quick overview of everything new added to Tailwind CSS version 4. If you want to dive deeper into the differences, then I'll leave a link to this blog post in the description below. It has tons of different links to different concepts throughout the text so that you can learn more about any of these features in detail that you'd like.