Tailwind V4 is WAY better than I expected

Tailwind CSS V4 is a major update with a new engine, significantly faster build times, and a more modern CSS approach. The update includes a unified toolchain, native CSS features, and a streamlined configuration process, all aimed at improving developer experience and performance. While the release is still in beta, it demonstrates a significant step forward for Tailwind.

Faster Build Times

• 00:00:46 Tailwind V4 boasts build times that are up to five times faster, and incremental builds are up to 100 times faster. This is a significant improvement, especially for larger projects and complex builds. This improvement is largely due to the new Rust-based toolchain that can parse files significantly faster and handle incremental updates quickly.

Unified Toolchain

• 00:00:30 Tailwind V4 introduces a unified toolchain, eliminating the need for separate installations of postCSS and autoprefixer. This also includes built-in import handling, vendor prefixing, and syntax transforms, streamlining the development process and simplifying the installation process. This update allows for a more consistent and simpler experience with Tailwind.

Modern CSS Features

• 00:03:30 Tailwind V4 incorporates native cascade layers, wide gamut colors, and offers first-class support for modern CSS features like container queries, starting styles, and popovers. It is built for the modern web and enables developers to easily leverage newer CSS capabilities within Tailwind. This update provides users with the ability to adopt modern web standards, enhancing the customization and styling of their web pages.

CSS Configuration

• 00:17:20 Tailwind V4 allows the majority of configuration to be done in CSS, specifically through the use of layers. The config JS file is no longer required for as much configuration, as many of the previous settings can now be defined in CSS. This allows developers to have all style-related configuration in one place, simplifying the configuration process for Tailwind.

Arbitrary Values

• 00:19:37 Tailwind V4 introduces support for arbitrary values in features like grid columns and other utilities. This change allows for greater flexibility and control when designing layouts and components. It moves away from relying entirely on predefined sizes and spacing, but also makes the class names potentially less predictable and uniform.