Skill / UI / Tailwind
Tailwind v4 capabilities
Reach for new v4 utilities before layout hacks, user-agent checks, or JavaScript measurement.
Goal
Use Tailwind's native v4 coverage for sizing, wrapping, validation, enter motion, masks, shadows, color scheme, and 3D transforms before adding custom code.
Styling rules for Tailwind v4, token discipline, component reuse, and className boundaries.
Checks
1Use `field-sizing-content` for auto-growing fields, bounded by `min-h-*` and `max-h-*`.
2Use `wrap-anywhere` or `wrap-break-word` for long content and `items-center-safe` or `justify-center-safe` when centered overflow should fall back safely.
3Use `user-valid:` and `user-invalid:` for validation states after user interaction.
4Use `starting:` with `transition-discrete` for enter transitions and popover/display transitions.
5Use `text-shadow-*`, `mask-t-from-*`, `mask-b-to-*`, `scheme-dark`, `rotate-x-*`, and `perspective-*` when those utilities fit the effect.
Avoid
1Measuring fields in JavaScript, adding `min-w-0`-style hacks before trying wrapping utilities, or sniffing user agents for coarse pointer behavior.
2Custom one-off CSS for effects that Tailwind v4 already exposes as token-aware utilities.
Source
Imported as local Refined UI skill guidance, with this repo owning the final wording.
Mastra tailwind-v4
../mastra/.claude/skills/tailwind-v4