Tailwind UI Skill
Tailwind CSS v4.1 development with accessibility and theming baked in.
Quick Reference
v4.1 Critical Changes
Never use deprecated utilities — always use replacements:
| Deprecated | Replacement |
|---|---|
bg-opacity-* | bg-black/50 (opacity modifier) |
bg-gradient-* | bg-linear-* |
shadow-sm | shadow-xs |
shadow | shadow-sm |
rounded-sm | rounded-xs |
rounded | rounded-sm |
ring | ring-3 |
outline-none | outline-hidden |
leading-* | Use text-base/7 line-height modifiers |
flex-shrink-* / flex-grow-* | shrink-* / grow-* |
space-x-* in flex/grid | Use gap-* instead |
Essential Patterns
<!-- Gap over space utilities -->
<div class="flex gap-4">...</div>
<!-- Opacity modifiers -->
<div class="bg-primary-500/60">...</div>
<!-- Line height modifiers -->
<p class="text-base/7">...</p>
<!-- Dynamic viewport height (mobile-safe) -->
<div class="min-h-dvh">...</div>
<!-- Size utility for equal dimensions -->
<div class="size-12">...</div>Reference Files
Load these based on the task:
- references/v4-migration.md — Full v4.1 breaking changes, upgrade process, new features
- references/accessibility.md — WCAG 2.1 AA patterns: contrast, focus, screen readers
- references/theming.md — @theme setup, CSS variables, light/dark mode
- references/components.md — Accessible component patterns (buttons, forms, cards, nav)
Theme Asset
- assets/theme-starter.css — Starter @theme with primary/secondary/tertiary color scales
Core Principles
- Use Tailwind's scale — Avoid arbitrary values like
ml-[16px]; useml-4 - Never use @apply — Use CSS variables or framework components
- Gap over margins — Use
gap-*in flex/grid, notspace-*or child margins - Test both modes — Always verify light AND dark mode appearance
- Accessibility first — Every interactive element needs visible focus states and proper contrast