# 顺风 CSS ## 何时使用 **shadcn/ui 是主要组件框架。** 这项技能涵盖了为 shadcn 组件提供支持的 Tailwind CSS 实用系统 - 将其用于布局、响应式设计、间距、主题和自定义样式，超出了 shadcn 提供的开箱即用功能。使用此技能可以： * 页面布局（弹性、网格、定位、间距） * 响应式设计（断点、容器查询） * 主题和设计标记（`@theme` 指令、CSS 变量） * 使用实用程序覆盖自定义 shadcn/ui 组件 * 动画和过渡 * 基于状态的样式（悬停、焦点、禁用）遵循 **shadcn-ui 技能**：组件选择、组合模式（对话框、工作表、命令）、表单集成（react-hook-form + zod）和可访问性。 ## 设置 (v4) Tailwind v4 使用 CSS-first 配置。不需要 `tailwind.config.js`。 ### 导入 /* 全局.css */ @导入“tailwindcss”；这个单一导入取代了 v3 指令（`@tailwind base`、`@tailwind Components`、`@tailwindutilities`）。模板文件是自动发现的 - 不需要内容路径。 ### 安装 # Next.js / Vite (PostCSS) npm 安装 tailwindcss @tailwindcss/postcss # Vite插件（替代） npm 安装 tailwindcss @tailwindcss/vite PostCSS 配置： // postcss.config.mjs 导出默认值{ 插件：{ "@tailwindcss/postcss": {}, }, }; Vite插件（如果不使用PostCSS）： // vite.config.ts 从“@tailwindcss/vite”导入 tailwindcss；导出默认的defineConfig({ 插件：[tailwindcss()]， }); **重要提示：** Sass 和 Less 与 Tailwind v4 不兼容。将纯 CSS 与“@theme”和“@layer”指令一起使用。 ## 使用@theme 进行主题化 `@theme` 指令定义了 CSS 中的设计标记。每个标记都会创建一个实用程序类和一个 CSS 变量。 ### 定义令牌 @导入“tailwindcss”； @主题{ --font-display: "Satoshi"，无衬线字体； --颜色品牌：oklch(0.72 0.18 50); --颜色品牌灯：oklch(0.92 0.05 50); --半径-lg: 0.75rem; --breakpoint-3xl: 120rem; } 这会生成： * `font-display` 实用程序类 * `bg-brand`、`text-brand` 颜色实用程序 * `rounded-lg` 使用自定义半径 * `3xl:` 响应断点 * CSS 变量：`var(--font-display)`、`var(--color-brand)` 等。 ### 覆盖默认值与扩展默认值 /* 扩展 — 添加到现有颜色 */ @主题{ --颜色品牌：oklch(0.72 0.18 50); } /* 覆盖 — 替换所有颜色 */ @主题{ --颜色-*：初始； --颜色品牌：oklch(0.72 0.18 50); --颜色-白色：#fff； --颜色-黑色：#000； } 在定义您自己的默认值之前，使用“--color-*：initial”（命名空间通配符）清除默认值。 ### 与 shadcn/ui 令牌对齐 shadcn/ui 在 `:root` 和 `.dark` 中定义语义标记（有关完整设置，请参阅 shadcn-ui 技能）。 Tailwind 的 `@theme` 可以参考这些： @主题内联{ --颜色背景：var(--背景); --前景颜色：var(--前景); --颜色主色：var(--primary); --颜色主前景：var(--主前景); --颜色静音：var(--静音); --颜色静音前景：var(--静音前景); --颜色破坏性：var（--破坏性）； --颜色边框：var(--边框); --颜色环：var(--ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); } `inline` 关键字告诉 Tailwind 不要发出变量（shadcn 已经在 `:root` 中定义了它们）。 ## 实用优先模式 ### 核心原则通过直接在标记中组合实用程序类来设置样式：

<头像 className="h-10 w-10" />

简·多伊

jane@example.com

### 间距 p-4 → 填充：1rem（所有边） px-6 → 左内边距 + 右内边距：1.5rem py-2 → 顶部填充 + 底部填充：0.5rem m-auto → 边距：自动 mt-8 → 顶部边距：2rem 间隙-4 → 间隙：1rem（柔性/网格） space-y-4 → 子级之间的垂直间距（基于边距） ### 版式文本-sm → 0.875rem / 1.25rem 文本-lg → 1.125rem / 1.75rem 半粗体字体 → 字体粗细：600 跟踪紧 → 字母间距：-0.025em 领先放松 → 行高：1.625 截断 → 溢出隐藏 + 文本溢出省略号 + 空白 nowrap line-clamp-3 → 钳位到 3 条线 ### 任意值使用括号表示不在主题中的一次性值：

对任意值中的空格使用下划线：`grid-cols-[1fr_2fr_1fr]`。优先选择主题标记（“w-96”、“gap-4”）而不是任意值。仅当设计确实需要一次性值但不在您的设计系统中时才使用括号。 ### 状态变体 <按钮 className="bg-primary 悬停:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring 禁用:opacity-50 禁用:pointer-events-none"> 保存常见变体：`hover:`、`focus:`、`focus-visible:`、`active:`、`disabled:`、`aria-selected:`、`data-[state=open]:`。 ### 组和对等修改器 {/* 父级悬停会影响子级 */}

标题

说明

{/* 对等状态影响兄弟姐妹 */}

电子邮件无效

### @apply（谨慎使用） `@apply` 将实用程序提取到自定义 CSS 类中。在 v4 中，**变体修饰符（`hover:`、`md:`、`focus:`）不能在 `@apply`** 中使用 - 使用原生 CSS 伪类和媒体查询，或者更喜欢使用 React 组件来实现有状态模式。 /* OK — 简单的原子模式 */ @层组件{ .prose-link { @apply text-primary下划线 underline-offset-4; } } /* 对于任何带有变体的东西，更喜欢使用 React 组件而不是 @apply */ ## 布局模式 ### 弹性盒 { /* 水平条，项目居中，之间有空格 */ }

<标志/> <用户菜单/>

; { /* 垂直堆栈 */ }

<卡片/> <卡片/>

; ### 网格 { /* 等宽列 */ }

<卡片/> <卡片/> <卡片/>

; { /* 跨列 */ }

{/* 主要 */}

{/* 侧边栏 */}

; { /* 自动填充响应网格（不需要断点） */ }

{items.map((item) => ( <卡密钥={item.id} /> ))}

; ### 常见食谱 **粘性标题+可滚动内容：**

{/* 标头 */}

{/* 可滚动内容 */}

**侧边栏布局：**

**居中内容（两个轴）：**

{/* 居中卡片 */}

## 响应式设计 ### 移动优先断点无前缀实用程序适用于**所有屏幕尺寸**。前缀实用程序适用于该断点**及以上**。前缀|最小宽度 |目标 ---|---|--- （无）| 0 像素 |所有尺寸（移动底座） `sm：` | 640 像素 |大手机 `MD：` | 768 像素 |平板电脑 `lg：` | 1024 像素 |笔记本电脑 `xl：` | 1280 像素 |台式机 `2xl：` | 1536 像素 |大型台式机 ### 响应式堆叠到网格 { /* 移动设备上单列，平板电脑上 2 列，桌面上 3 列 */ }

<卡片/> <卡片/> <卡片/>

; ### 响应式字体

仪表板

### 响应式间距

{/* 在大屏幕上增加内边距的内容 */} ### 通过断点显示/隐藏 { /* 移动导航切换 - 隐藏在桌面上 */ }

顺风

包含技能