Tailwind UI Skill Skill

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]; use ml-4
Never use @apply — Use CSS variables or framework components
Gap over margins — Use gap-* in flex/grid, not space-* 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

Agent Skills: Tailwind UI Skill

Install this agent skill to your local

Skill Files