AI Skills
tailwind-css-patterns

tailwind-css-patterns

热门

提供全面的 Tailwind CSS 实用优先样式模式，包括响应式设计、布局工具、弹性盒子、网格、间距、排版、颜色和现代 CSS 最佳实践。适用于为 React/Vue/Svelte 组件添加样式、构建响应式布局、实现设计系统或优化 CSS 工作流。

311Star
36Fork
更新于 2026/6/22
获取 Skill源代码

相关 Skills

javascript-testing-patterns3.8万motion-advanced24万frontend-code-review15万
SKILL.md
readonly只读
name
tailwind-css-patterns
description

提供全面的 Tailwind CSS 实用优先样式模式，包括响应式设计、布局工具、弹性盒子、网格、间距、排版、颜色和现代 CSS 最佳实践。适用于为 React/Vue/Svelte 组件添加样式、构建响应式布局、实现设计系统或优化 CSS 工作流。

Tailwind CSS 开发模式

使用 Tailwind CSS 实用优先框架构建现代、响应式用户界面的专家指南。涵盖 v4.1+ 特性，包括 CSS 优先配置、自定义实用程序和增强的开发体验。

概述

提供使用 Tailwind CSS v4.1+ 构建响应式、可访问 UI 的可操作模式。涵盖实用程序组合、深色模式、组件模式和性能优化。

使用场景

  • 为 React/Vue/Svelte 组件添加样式
  • 构建响应式布局和网格
  • 实现设计系统
  • 添加深色模式支持
  • 优化 CSS 工作流

快速参考

响应式断点

前缀 最小宽度 描述
sm: 640px 小屏幕
md: 768px 平板
lg: 1024px 桌面
xl: 1280px 大屏幕
2xl: 1536px 超大屏幕

常见模式

<!-- 居中内容 -->
<div class="flex items-center justify-center min-h-screen">
  内容
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 项目 -->
</div>

<!-- 卡片组件 -->
<div class="bg-white rounded-lg shadow-lg p-6">
  <h3 class="text-xl font-bold">标题</h3>
  <p class="text-gray-600">描述</p>
</div>

操作说明

  1. 移动优先：为移动端编写基础样式，为大屏幕添加响应式前缀（sm:、md:、lg:）
  2. 使用设计令牌：利用 Tailwind 的间距、颜色和排版比例
  3. 组合实用程序：组合多个实用程序以实现复杂样式
  4. 提取组件：为重复模式创建可复用的组件类
  5. 配置主题：在 tailwind.config.js 或使用 @theme 自定义设计令牌
  6. 验证更改：使用 DevTools 响应式模式在每个断点测试。提交前检查视觉回归和可访问性问题。

示例

响应式卡片组件

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
      <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
      <div className="p-6">
        <h3 className="text-lg font-semibold">{product.name}</h3>
        <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
          加入购物车
        </button>
      </div>
    </div>
  );
}

深色模式切换

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="dark:text-white">标题</h1>
</div>

表单输入

<input
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="you@example.com"
/>

最佳实践

  1. 一致间距：使用 Tailwind 的间距比例（4、8、12、16 等）
  2. 颜色调色板：坚持使用 Tailwind 的颜色系统以保持一致性
  3. 组件提取：将重复模式提取为可复用组件
  4. 实用程序组合：优先使用实用程序类而非 @apply 以保持可维护性
  5. 语义化 HTML：使用正确的 HTML 元素并配合 Tailwind 类
  6. 性能：确保内容路径包含所有模板文件以实现最佳清除
  7. 可访问性：包含焦点样式、ARIA 标签并尊重用户偏好（减少动画）

故障排除

类未生效

  • 检查内容路径：确保所有模板文件都包含在配置的 content: [] 中
  • 验证构建：运行 npm run build 重新生成清除后的 CSS
  • 开发模式：使用 npx tailwindcss -o 并添加 --watch 标志以实时更新

响应式样式无效

  • 顺序重要：响应式前缀必须位于非响应式之前（例如 md:flex 而非 flex md:flex）
  • 检查断点值：验证断点是否符合设计需求
  • DevTools：使用浏览器 DevTools 响应式模式在每个断点测试

深色模式问题

  • 验证配置：确保正确设置了 darkMode: 'class' 或 'media'
  • 切换实现：对于 class 策略，使用 document.documentElement.classList.toggle('dark')
  • 初始闪烁：在 body 渲染前将 dark 类添加到 <html>

约束与警告

  • 类膨胀：过长的类字符串会降低可读性；提取到组件中
  • 内容路径：配置错误的路径会导致生产环境中类被清除
  • 任意值：谨慎使用；优先使用设计令牌以保持一致性
  • 特异性问题：避免在复杂选择器中使用 @apply
  • 深色模式：需要正确配置（class 或 media 策略）
  • 浏览器支持：查看 Tailwind 文档了解兼容性说明

参考资料

外部资源