Tailwind CSS v4: Breaking Changes and Exciting Features

, ,

Tailwind CSS v4 is here, bringing several changes that improve flexibility and maintainability. In this post, we’ll go over some of the breaking changes and highlight one of the most exciting new features: Dynamic utility values and variants.

Breaking Changes

Before upgrading, take note of these breaking changes:

  1. Configuration File Format
  • The configuration file has transitioned from JavaScript to CSS, leveraging native CSS features for a more streamlined setup. You’ll need to migrate your tailwind.config.js to the new format.
  1. Removal of Deprecated Utilities
  • Utilities and classes deprecated in previous versions have been removed in v4. Review your codebase and update them to ensure compatibility.

For a comprehensive list of breaking changes and guidance on upgrading, check out the official Tailwind CSS Upgrade Guide.

Dynamic Utility Values and Variants

One of the most significant improvements in Tailwind CSS v4 is the introduction of Dynamic utility values and variants. Previously, you could only use predefined utility values like px-4, or use arbitrary values in brackets, such as:

1
<div class="px-[1.275rem]"></div>

With v4, you can now define any value directly in the class name without needing brackets. Tailwind now generates CSS dynamically using a new calculation system:

1
2
3
4
5
6
7
.px-5.1 {
    // --spacing are 0.25rem
    // 5.1 * --spacing will give 1.275rem

    padding-left: calc(var(--spacing) * 5.1);
    padding-right: calc(var(--spacing) * 5.1);
}

What This Means

  • No more arbitrary class brackets for custom values.
  • Fully customizable utilities without predefined limits.
  • Cleaner, more readable class names.

How to Upgrade

To make upgrading easier, Tailwind CSS provides an automated migration tool that can handle many of the necessary changes automatically. Check out the official Upgrade Guide for detailed steps and recommendations.

Tailwind CSS v4 brings powerful improvements, especially with dynamic utility values and variants. While breaking changes may require some adjustments, the new features provide greater flexibility and scalability.

Are you excited about Tailwind CSS v4?