Tailwindcss 4 Released

Last night in Miami, the launch of Tailwind CSS 4 brought together developers, designers, and tech enthusiasts from across the globe for an electrifying event. The atmosphere buzzed with anticipation as the team behind Tailwind unveiled the latest iteration of their groundbreaking utility-first framework. Held at a vibrant downtown venue, the event showcased the cutting-edge features of Tailwind CSS 4, including enhanced performance, expanded utilities, and an updated default design system tailored for modern web applications.

I had the privilege of attending this landmark launch, immersing myself in the excitement of the community. Seeing the framework in action through live demos was particularly inspiring, as developers demonstrated how the new features could streamline workflows and enable even more creative designs. The evening was not just about the product but also about the people — a celebration of collaboration and innovation that defines the Tailwind ecosystem.

Adam Wathan Creator of Tailwindcss.

Tailwind CSS v4:

1. Performance Enhancements: The new Oxide engine offers full builds up to 5 times faster and incremental builds up to 100 times faster.

2. Unified Toolchain: Tailwind CSS v4 integrates tools like autoprefixer and postcss directly, eliminating the need for separate installations.

3. CSS-First Configuration: Configuration has moved from JavaScript files to CSS, allowing customization directly within your CSS using the @theme directive.

4. Modern CSS Features: Tailwind CSS v4 supports container queries, enabling responsive designs based on container size rather than viewport size.

5. Enhanced Color System: The color palette is now based on the oklch color model, providing more consistent and vibrant colors across different screens.

6. Inset Shadows and Rings: New utilities like inset-shadow and inset-ring allow for easy creation of inset shadows and rings on elements.

7. Composable Variants: Variants can now be composed together, enabling more complex and flexible styling options.

8. Zero-Configuration Content Detection: Tailwind CSS v4 automatically detects your template files, reducing the need for manual configuration.

These updates make Tailwind CSS v4 a powerful tool for modern web development, enhancing performance, flexibility, and ease of use.

Steve Schoger, diseñador en Tailwind CSS.