●Change8

v4.1.0

Breaking Changes
📦 tailwind-cssView on GitHub →
⚠ 2 breaking✨ 11 features🐛 7 fixes⚡ 2 deprecations🔧 9 symbols

Summary

This release introduces several new variants and utilities including text-shadow and mask support, while refining the @source directive behavior and ignoring node_modules by default.

⚠️ Breaking Changes

  • node_modules is now ignored by default for class scanning. If you rely on scanning node_modules, you must now explicitly include them using @source rules.
  • @source rules that include file extensions or point inside node_modules/ folders no longer respect .gitignore rules.

Migration Steps

  1. If scanning classes inside node_modules, add explicit @source rules to your CSS.
  2. Update background position utilities from bg-{side}-{side} to bg-{top/bottom}-{left/right} format.
  3. Update object position utilities from object-{side}-{side} to object-{top/bottom}-{left/right} format.

✨ New Features

  • Add details-content, inverted-colors, and noscript variants.
  • Add items-baseline-last and self-baseline-last utilities.
  • Add pointer-none, pointer-coarse, pointer-fine and any-pointer variants.
  • Add safe alignment utilities.
  • Add user-valid and user-invalid variants.
  • Add wrap-anywhere, wrap-break-word, and wrap-normal utilities.
  • Add @source inline(…), @source not inline(…), and @source not "…" directives.
  • Add text-shadow-* and mask-* utilities.
  • Add bg-{position,size}-* utilities for arbitrary values.
  • Add opacity control for shadow, inset-shadow, drop-shadow, and text-shadow using /<alpha>.
  • Add drop-shadow-<color> utilities.

🐛 Bug Fixes

  • Follow symlinks when resolving @source directives.
  • Prevent scanning of ignored files during @tailwindcss/cli rebuilds.
  • Support negated content rules in legacy JavaScript configuration.
  • Fix Razor file syntax interpretation for @ symbols.
  • Disallow invalid characters (top-level braces/semicolons, unbalanced parens) in arbitrary values.
  • Ensure --theme(…) resolves to CSS variables in legacy JS plugins.
  • Detect used theme variables in CSS module files.

🔧 Affected Symbols

@source@tailwindcss/cli--theme()items-baseline-lastself-baseline-lasttext-shadowmaskbg-left-topobject-left-top

⚡ Deprecations

  • Deprecated bg-{left,right}-{top,bottom} in favor of bg-{top,bottom}-{left,right} utilities.
  • Deprecated object-{left,right}-{top,bottom} in favor of object-{top,bottom}-{left,right} utilities.