Tailwind CSS 4.1: What's New, Release History & EOL Status

What Is New in Tailwind CSS 4.1

How can I add text shadows to headings with Tailwind CSS 4.1?

Tailwind CSS 4.1 introduces a full suite of text-shadow-* utilities that let you apply subtle or dramatic shadows directly in your markup.

• Sizes range from text-shadow-2xs to text-shadow-lg.
• Use a color modifier like text-shadow-sky-300 to change the shadow hue.
• Opacity modifiers are chained with a slash, e.g., text-shadow-lg/50 for 50 % opacity.

<p class="text-2xl font-bold text-shadow-lg text-shadow-indigo-500/30">Bold heading</p>

In practice this means you can make hero titles stand out on busy backgrounds without writing custom CSS.

What new masking utilities does Tailwind CSS 4.1 provide and how do I use them?

Tailwind CSS 4.1 adds a dedicated mask-* API that mirrors bg-* but works with mask-image and is fully composable.

• Linear side masks: mask-t-from-50%, mask-r-to-80%, etc.
• Radial and conic masks: mask-radial-[50%_90%], mask-radial-from-80%.
• Combine multiple masks on the same element for complex effects.

<div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)]"></div>

This matters if you need to reveal or hide parts of an image based on design requirements without extra SVG or JS.

How does Tailwind CSS 4.1 improve browser compatibility for older browsers?

Tailwind CSS 4.1 ships with built-in fallbacks that let modern CSS features degrade gracefully in legacy browsers.

• Oklab colors now have fallback values for Safari ≤ 15.
• Properties defined with @property (shadows, gradients, transforms) receive polyfilled equivalents.
• Opacity modifiers generate inline fallback colors.
• Gradients without native interpolation fall back to the browser's default rendering.

Most teams can keep the same Tailwind config and trust that users on older iOS or Firefox still see a functional UI.

How can I control text wrapping and overflow with the new overflow-wrap utilities?

The new wrap-break-word and wrap-anywhere utilities give you fine-grained control over how long strings break.

• wrap-break-word forces a break at the end of a word, ideal for URLs.
• wrap-anywhere allows mid-word breaks, removing the need for min-width:0 in flex children.

<p class="wrap-break-word">https://example.com/very/long/path/that/needs/wrapping</p>

This is especially useful in card components where a single long word can otherwise overflow the container.

How do the new pointer and any-pointer variants help with device-specific styling?

Tailwind CSS 4.1 adds pointer-fine, pointer-coarse, any-pointer-fine, and any-pointer-coarse variants to target mouse vs. touch input directly.

• Use pointer-coarse: to enlarge hit targets on touch devices.
• Use pointer-fine: for tighter spacing on mouse-driven interfaces.
• any-pointer-* matches if any connected device meets the criteria, useful for hybrid laptops.

<div class="grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3">...</div>

Watch out for over-using these variants; they add extra CSS weight, so apply them only where the UX truly differs.