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.
ソース情報
- リポジトリ
- Boise-State-Development/agentcore-public-stack
- ソースの最終更新活動
- 2026年6月24日 18:14
- 検出された SKILL.md の言語
- 英語
- スター
- 17
- フォーク
- 29
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
8 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- 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
GitHubで見る