Tailwind CSS Knowledge Patch Skill

Tailwind CSS Knowledge Patch

Covers Tailwind CSS 4.1 (2025-04-03). Claude Opus 4.6 knows Tailwind CSS through 3.x. It is unaware of the features below.

Index

| Topic | Reference | Key features | |---|---|---| | New utilities | references/utilities.md | Text shadows, masks, overflow-wrap, colored drop shadows, alignment | | New variants | references/variants.md | Pointer device, details-content, inverted-colors, noscript, user-valid/user-invalid | | Configuration | references/configuration.md | @source not, @source inline() |

New Utility Classes (4.1)

Text Shadow

| Class | Effect | |---|---| | text-shadow-{2xs,xs,sm,md,lg} | Text shadow at size | | text-shadow-<color> | Shadow color | | text-shadow-lg/50 | Size with opacity modifier |

<p class="text-shadow-md text-shadow-blue-500">Shadowed text</p>
<p class="text-shadow-lg/30">30% opacity shadow</p>

Composable Mask Utilities

Direction-based linear masks and radial masks. Multiple masks compose together.

| Pattern | Purpose | |---|---| | mask-{t,r,b,l}-from-<value> | Linear mask start (direction) | | mask-{t,r,b,l}-to-<value> | Linear mask end (direction) | | mask-radial-from-<value> | Radial mask start | | mask-radial-to-<value> | Radial mask end | | mask-radial-at-<position> | Radial mask position |

<div class="mask-b-from-50% bg-[url(/img/photo.jpg)]"></div>
<div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70%"></div>

Overflow Wrap

| Class | CSS | |---|---| | wrap-break-word | overflow-wrap: break-word | | wrap-anywhere | overflow-wrap: anywhere |

Use wrap-anywhere inside flex containers instead of min-w-0 hacks:

<div class="flex">
  <div class="wrap-anywhere">
    <p>long.email@example.com</p>
  </div>
</div>

Colored Drop Shadows

drop-shadow-<color> and drop-shadow-<color>/<opacity> to color filter drop shadows:

<svg class="drop-shadow-xl drop-shadow-cyan-500/50">...</svg>

Alignment

items-baseline-last / self-baseline-last — align to the last line of text baseline in flex/grid
Safe alignment — append -safe to fall back to start on overflow: justify-center-safe, items-center-safe, etc.

<ul class="flex justify-center-safe gap-2">...</ul>

New Variants (4.1)

| Variant | Purpose | |---|---| | pointer-fine | Primary pointer is fine (mouse) | | pointer-coarse | Primary pointer is coarse (touch) | | any-pointer-fine | Any available pointer is fine | | any-pointer-coarse | Any available pointer is coarse | | details-content | Targets content container of <details> | | inverted-colors | Matches OS inverted-colors mode | | noscript | Applies when JS is disabled | | user-valid | Validation styling after user interaction | | user-invalid | Validation styling after user interaction |

<!-- Responsive touch targets -->
<label class="p-2 pointer-coarse:p-4">Option</label>

<!-- Validation after interaction (no error flash on page load) -->
<input
  type="email"
  required
  class="border user-valid:border-green-500 user-invalid:border-red-500"
/>

<!-- Progressive enhancement fallback -->
<div class="hidden noscript:block">Please enable JavaScript.</div>

<!-- Style details content -->
<details class="details-content:p-4 details-content:bg-gray-50">
  <summary>Expand</summary>
  <p>Styled content area.</p>
</details>

Configuration (4.1)

`@source not` — Exclude paths from class scanning

@source not "./src/components/legacy";

`@source inline()` — Safelist replacement

Force-generate classes with brace expansion:

@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
@source not inline("container"); /* prevent generation */

Reference Files

| File | Contents | |---|---| | utilities.md | Text shadows, masks, overflow-wrap, colored drop shadows, alignment utilities | | variants.md | Pointer device, details-content, inverted-colors, noscript, user-valid/invalid variants | | configuration.md | @source not, @source inline() directives |

Agent Skills: Tailwind CSS Knowledge Patch

Install this agent skill to your local

Skill Files