tailwind-css-patterns

Name: tailwind-css-patterns
Author: giuseppe-trisciuoglio

github.com/giuseppe-trisciuoglio设计与 UI36517.7k 次安装7 周前更新

代码仓库

关于 tailwind-css-patterns

tailwind-css-patterns 是面向使用 Tailwind CSS v4.1+ 的界面开发者的实践指南，覆盖响应式布局、无障碍设计和样式优化。内容还包括工具类组合、暗色模式及 CSS 优先配置等模式。

主要功能

01响应式布局和断点模式
02工具类组合与组件提取
03暗色模式配置
04设计令牌与主题设置
05性能和无障碍实践

适用场景

01为 React、Vue 或 Svelte 组件编写样式
02构建响应式布局和网格
03为界面设计系统配置主题
04检查断点、暗色模式和无障碍表现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns

安装后在 Claude Code 中输入/tailwind-css-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

accessibility.md

animations.md

component-patterns.md

configuration.md

layout-patterns.md

performance.md

reference.md

responsive-design.md

详细介绍

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">
  Content
</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">Title</h3>
  <p class="text-gray-600">Description</p>
</div>

说明

从移动端优先开始：编写适用于移动端的基础样式，并为更大的屏幕添加响应式前缀（sm:、md:、lg:）
使用设计令牌：利用 Tailwind 的间距、颜色和排版比例
组合实用类：组合多个实用类来实现复杂样式
提取组件：为重复模式创建可复用的组件类
配置主题：在 tailwind.config.js 中或使用 @theme 自定义设计令牌
验证更改：使用 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">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

暗色模式切换

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="dark:text-white">Title</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="[email protected]"
/>

最佳实践

间距保持一致：使用 Tailwind 的间距比例（4、8、12、16 等）
调色板：使用 Tailwind 的颜色系统以保持一致性
提取组件：将重复模式提取为可复用组件
实用类组合：为便于维护，优先使用实用类，而非 @apply
语义化 HTML：使用合适的 HTML 元素和 Tailwind 类
性能：确保内容路径包含所有模板文件，以便优化清除未使用的样式
无障碍性：添加焦点样式和 ARIA 标签，并尊重用户偏好（减少动态效果）

故障排除

类未生效

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

响应式样式无效

顺序很重要：响应式前缀必须放在非响应式类之前（例如，使用 md:flex，而不是 flex md:flex）
检查断点值：确认断点符合设计要求
DevTools：使用浏览器 DevTools 的响应式模式在每个断点进行测试

暗色模式问题

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

限制和警告

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

参考资料

references/layout-patterns.md — Flexbox、网格、间距、排版、颜色
references/component-patterns.md — 卡片、导航、表单、模态框、React 模式
references/responsive-design.md — 响应式模式、深色模式、容器查询
references/animations.md — 过渡、变换、内置动画、动态效果偏好
references/performance.md — 包优化、CSS 优化、生产构建
references/accessibility.md — 焦点管理、屏幕阅读器、颜色对比度、ARIA
references/configuration.md — CSS 优先配置、JavaScript 配置、插件、预设
references/reference.md — 其他参考资料

外部资源

支持 Markdown

登录后评论