●Change8

v4.0.0-beta.9

Breaking Changes
📦 tailwind-css
⚠ 2 breaking✨ 6 features🐛 8 fixes⚡ 2 deprecations🔧 16 symbols

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.

⚠️ Breaking Changes

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

✨ New Features

  • New @tailwindcss/browser package for running Tailwind CSS directly in the browser.
  • New @reference "…" API for referencing external CSS without including it in the output.
  • Support for defining functional utilities directly in CSS.
  • New CSS functions: --spacing(…), --alpha(…), and --theme(…).
  • Added musl-based Linux builds for the standalone CLI.
  • Performance improvements for internal AST manipulations.

🐛 Bug Fixes

  • Corrected property values for place-content-between, place-content-around, and place-content-evenly.
  • Prevented detection of arbitrary properties when preceded by an escape character.
  • Fixed inset-shadow-* suggestions in IntelliSense.
  • Arbitrary values are now only compiled if they end with a closing bracket ']'.
  • Fixed @apply rule processing order.
  • Allowed negative utility names within the @utility directive.
  • Ensured @keyframes from JS plugins are removed when using @reference imports.
  • Experimental upgrade fix: Prevented class name extraction from functions like drop-shadow().

🔧 Affected Symbols

@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

⚡ Deprecations

  • The @import "…" reference syntax is deprecated in favor of the new @reference "…" API.
  • --max-width-prose is now a deprecated theme variable replacing --container-prose.