tailwind-ui
0
总安装量
5
周安装量
安装命令
npx skills add https://github.com/boise-state-development/agentcore-public-stack --skill tailwind-ui
Agent 安装分布
opencode
3
antigravity
3
claude-code
3
gemini-cli
3
windsurf
2
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]; 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