tailwind-ui
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.
Datos de origen
- Repositorio
- Boise-State-Development/agentcore-public-stack
- Última actividad en el origen
- 24 de junio de 2026 a las 18:14
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 17
- Forks
- 29
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Explorador de archivos
8 archivosMostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- tailwind-ui
- description
- 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.
# 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](references/v4-migration.md)** — Full v4.1 breaking changes, upgrade process, new features
- **[references/accessibility.md](references/accessibility.md)** — WCAG 2.1 AA patterns: contrast, focus, screen readers
- **[references/theming.md](references/theming.md)** — @theme setup, CSS variables, light/dark mode
- **[references/components.md](references/components.md)** — Accessible component patterns (buttons, forms, cards, nav)
- **[references/app-conventions.md](references/app-conventions.md)** — Project-specific list & form page design tokens (border radius, list style, form sections). Load this for any list or form page in `frontend/ai.client`.
## Theme Asset
- **[assets/theme-starter.css](assets/theme-starter.css)** — Starter @theme with primary/secondary/tertiary color scales
## Core Principles
1. **Use Tailwind's scale** — Avoid arbitrary values like `ml-[16px]`; use `ml-4`
2. **Never use @apply** — Use CSS variables or framework components
3. **Gap over margins** — Use `gap-*` in flex/grid, not `space-*` or child margins
4. **Test both modes** — Always verify light AND dark mode appearance
5. **Accessibility first** — Every interactive element needs visible focus states and proper contrast
Ver en GitHub