Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Delivers Tailwind CSS 4.1 updates beyond Claude cutoff: text shadows, composable masks, overflow-wrap, colored drop shadows, safe alignment, pointer variants, @source directives. Use for Tailwind 4+ projects.
npx claudepluginhub nevaberry/nevaberry-plugins --plugin tailwind-knowledge-patchHow this skill is triggered — by the user, by Claude, or both
Slash command
/tailwind-knowledge-patch:tailwind-knowledge-patchThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
Tailwind CSS v4 utility-first discipline: CSS-first configuration, design tokens via @theme, and principled class composition. Invoke whenever task involves any interaction with Tailwind CSS — writing, reviewing, refactoring, debugging, or understanding utility classes, theme configuration, custom utilities, dark mode, or Tailwind integration with frameworks.
Provides Tailwind CSS patterns for layouts with Flexbox/Grid, responsive breakpoints, container queries, dark mode, animations, and v4 migration.
References Tailwind CSS v4.1 core features including @theme namespaces, directives (@utility, @variant), CSS-first config, custom styles, and v3 to v4 migration guide with breaking changes.
Share bugs, ideas, or general feedback.
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.
| 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() |
| 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>
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>
| 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>
drop-shadow-<color> and drop-shadow-<color>/<opacity> to color filter drop shadows:
<svg class="drop-shadow-xl drop-shadow-cyan-500/50">...</svg>
items-baseline-last / self-baseline-last — align to the last line of text baseline in flex/grid-safe to fall back to start on overflow: justify-center-safe, items-center-safe, etc.<ul class="flex justify-center-safe gap-2">...</ul>
| 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>
@source not — Exclude paths from class scanning@source not "./src/components/legacy";
@source inline() — Safelist replacementForce-generate classes with brace expansion:
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
@source not inline("container"); /* prevent generation */
| 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 |