We're looking ahead to Tailwind CSS v4 and the team is looking to build a framework that feels cutting edge for years to come.
Native Cascading Layers – We now use real @layerrules, which solves a ton of specificity issues we’ve struggled with in the past.
Explicitly defined custom properties: We use @property to define internal custom properties with appropriate types and constraints, allowing us to do things like transition background gradients.
Using color-mix for opacity modifiers: Makes it easier than ever to use opacity modifier syntax when using CSS variables for colors, or even adjusting the opacity of currentColor.
Container queries in core: Added support for container effective pakistan mobile numbers list queries directly to core, with new @min-* and @max-* variants for container query ranges.
Work is also underway to update the color palette with a wider range of colors and introduce support for other modern CSS features like @starting-style , anchor positioning, and more.
What's changed in Tailwind 4.0?
Removed obsolete utilities: Removed utilities that are no longer documented for a long time, such as text-opacity-*, flex-grow-*
The PostCSS plugin and CLI are separate packages - the main tailwindcss package no longer includes them because not everyone needs them - they must be installed separately using @tailwindcss/postcss and @tailwindcss/cli.
No default border color: The border used to default to gray-200, but now defaults to the same currentColor as the browser. This change was made to make it harder to accidentally introduce the wrong gray into your project if you're using another one.
There are some other very low-level implementation changes that might creep into your projects somehow, but nothing deliberate like these changes.
Roadmap to version 4.0
This new engine is a rewrite from the ground up, focused entirely on this reimagined developer experience using the new configuration approach.
They place a huge value on backwards compatibility, and that's where most of the work lies before we can tag a stable v4.0 release later this year.
Conclusions
Tailwind CSS 4 is a powerful and versatile tool for web developers looking to streamline their workflow and create beautiful, responsive websites. With its improved performance, expanded color palette, enhanced customization, new utility classes, and a focus on accessibility, Tailwind CSS 4 will become an essential tool in any developer’s toolkit. Whether you’re building a small project or a large-scale application, Tailwind CSS 4 provides the features and flexibility needed to bring your web designs to life.