How Tailwind Changed The Game... Again

I?ve been using Tailwind CSS since v2. At first, version 4 may look simple, but it has changed how I write CSS once again. From the first-class Vite plugin to the use of CSS variables for configuration, the improvements are impressive. If you?re still on version 3, you?re missing out on some powerful new capabilities.

1. Lightning CSS

First things first: PostCSS is gone. That might sound limiting. But you can still add PostCSS if you truly need it. In most cases, though, Lightning CSS and Vite cover 99% of real-world use. The upside? Faster builds. No more waiting on PostCSS to prune Tailwind?s output.

Lightning CSS brings support for modern, future-facing CSS features. Features like native nesting, @propery and color-mix(). These tools aren?t nice-to-haves. They?re powerful building blocks for writing cleaner, more expressive styles today.

2. First Class Vite Integration

Tailwind 4 works out of the box with Vite. This tight integration makes use of Vite?s fast dev server, native ES module support, and instant HMR. Adding Tailwind CSS is now a simple task. Install a few plugins, update your Vite config and CSS, and you will be ready to proceed.

3. CSS As Configuration

Tailwind 4 moves away from traditional config files. It uses CSS variables as a main form of configuration. Define CSS variables for colors, fonts, and spacing instead of using tailwind.config.js. You can reuse these variables throughout your CSS. This makes your design system more flexible and easier to theme.

This change simplifies dynamic theming. Now, adjusting colors for dark mode or user preferences is easier. Just update the variable! It also reduces rebuilds and improves interoperability with other styling layers. Tailwind now sees CSS as a live and adjustable runtime. It?s more than just precompiled output. It?s a foundational shift.

4. Modern CSS

Tailwind CSS 4 embraces the full power of modern CSS. It supports container queries. This lets components change based on their parent's size, not just the viewport. This enables more flexible, self-aware UI patterns.

Cascade layers give you control over utility, component, and custom styles. Now, you don?t need to use specificity hacks.

On the selector side, Tailwind 4 (via Lightning CSS) enables advanced features like :not(), :is(), and :has(). These make targeting elements more expressive and conditional styling much easier.

Final Thoughts

Tailwind 4 doesn?t reinvent the framework. It might not be as flashy as JIT and arbitrary values. But, I believe Tailwind 4 will go down as one of its more influential updates. It traded complexity for speed and flexibility. The result is a more modern, interoperable, and runtime-friendly toolset. You get faster builds. Smarter theming. Cleaner code. And deeper alignment with where CSS is going... not where it?s been. If you?ve been holding off on upgrading from v3, now?s the time. It?s worth it.