tailwind-ui

Original：🇺🇸 English

Translated

Tailwind CSS v4.1 best practices with WCAG 2.1 AA accessibility, theming, and dark mode support. Use when working with HTML, CSS, styling components, accessibility (a11y), WCAG compliance, color contrast, focus states, screen readers, theming, light mode, dark mode, or building accessible UI patterns like buttons, forms, cards, and navigation. Complements the angular-best-practices skill for Angular frontends.

1installs

Sourceboise-state-development/agentcore-public-stack

Added on2026-02-21

NPX Install

npx skill4agent add boise-state-development/agentcore-public-stack tailwind-ui

SKILL.md Content

View Translation Comparison →

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

html

<!-- 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