Back to Details

tailwind-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind UI Skill

Tailwind UI 技能指南

Tailwind CSS v4.1 development with accessibility and theming baked in.
内置可访问性与主题定制的 Tailwind CSS v4.1 开发指南。

Quick Reference

快速参考

v4.1 Critical Changes

v4.1 关键变更

Never use deprecated utilities — always use replacements:
DeprecatedReplacement
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
切勿使用已弃用的工具类——请始终使用替代方案：
已弃用替代方案
bg-opacity-*
bg-black/50
（透明度修饰符）
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-*
使用 
text-base/7
行高修饰符
flex-shrink-*
/ 
flex-grow-*
shrink-*
/ 
grow-*
space-x-*
in flex/grid		改用 
gap-*

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>
html
<!-- 优先使用 Gap 而非 Space 工具类 -->
<div class="flex gap-4">...</div>

<!-- 透明度修饰符 -->
<div class="bg-primary-500/60">...</div>

<!-- 行高修饰符 -->
<p class="text-base/7">...</p>

<!-- 动态视口高度（移动端安全） -->
<div class="min-h-dvh">...</div>

<!-- 等尺寸工具类 -->
<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)
根据任务需求加载以下文档：
  • references/v4-migration.md — 完整的 v4.1 破坏性变更、升级流程及新功能说明
  • references/accessibility.md — WCAG 2.1 AA 相关模式：对比度、焦点、屏幕阅读器适配
  • references/theming.md — @theme 配置、CSS 变量、亮色/暗色模式
  • references/components.md — 无障碍组件模式（按钮、表单、卡片、导航）

Theme Asset

主题资源

  • assets/theme-starter.css — Starter @theme with primary/secondary/tertiary color scales
  • assets/theme-starter.css — 包含主色/次色/第三色阶的 @theme 初始模板

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
  1. 使用 Tailwind 内置刻度值 — 避免使用 
    ml-[16px]
    这类任意值；请使用 
    ml-4
  2. 禁止使用 @apply — 改用 CSS 变量或框架组件
  3. 优先使用 Gap 而非外边距 — 在 flex/grid 布局中使用 
    gap-*
    ，而非 
    space-*
    或子元素外边距
  4. 双模式测试 — 务必同时验证亮色与暗色模式的显示效果
  5. 可访问性优先 — 所有交互元素都需要可见的焦点状态及符合标准的对比度