●Change8

Migrating to Tailwind CSS v4.0.0-beta.9

Version v4.0.0-beta.9 introduces 2 breaking changes. This guide details how to update your code.

Released: 1/9/2025

2
Breaking Changes
5
Migration Steps
16
Affected Symbols

⚠️ Check Your Code

If you use any of these symbols, you need to read this guide:

@tailwindcss/browser@reference@utility@apply--spacing--alpha--themeplace-content-betweenplace-content-aroundplace-content-evenlybg-roundbg-spacebg-repeat-roundbg-repeat-space--container-prose--max-width-prose

Breaking Changes

●Issue #1

The utilities bg-round and bg-space have been renamed to bg-repeat-round and bg-repeat-space. Update your class names to the new versions.

●Issue #2

The --container-prose variable was removed. Use the deprecated --max-width-prose variable instead, as *-prose is now restricted to max-width utilities for backward compatibility.

Migration Steps

  1. 1
    Replace @import "…" reference with @reference "…".
  2. 2
    Rename bg-round to bg-repeat-round and bg-space to bg-repeat-space in your templates.
  3. 3
    Update theme(spacing.x) calls to use the new --spacing(x) function.
  4. 4
    Update theme(…) calls to use the new --theme(…) function.
  5. 5
    Replace usage of --container-prose with --max-width-prose.

Release Summary

This release introduces a browser-based package, new CSS functions for spacing and themes, and the @reference API. It also includes several utility renames and experimental migration improvements for theme functions.

Need More Details?

View the full release notes and all changes for Tailwind CSS v4.0.0-beta.9.

View Full Changelog