tailwind-patterns

Name: tailwind-patterns
Author: sickn33

github.com/sickn33设计与 UI48.7k1.5k 次安装今天更新

代码仓库

关于 tailwind-patterns

为使用 Tailwind CSS v4 的前端开发者提供 CSS 优先配置与现代样式模式指南，涵盖主题令牌、容器查询和响应式布局。

主要功能

01CSS 优先的主题配置
02容器查询与断点设计
03移动优先响应式布局
04暗色模式配置
05布局、颜色与排版模式
06组件抽取与性能建议

适用场景

01配置 Tailwind v4 主题令牌
02为可复用组件实现响应式样式
03选择暗色模式策略
04整理重复工具类并优化样式

安装

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill tailwind-patterns

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

详细介绍

Tailwind CSS 模式（v4 - 2025）

现代化的工具优先 CSS，采用原生 CSS 配置。

适用场景

在配置 Tailwind v4、使用 CSS 优先的主题和设计令牌，或实现容器查询及现代 Tailwind 模式时，使用此技能。

1. Tailwind v4 架构

v3 到 v4 的变化

v3（旧版）	v4（当前版）
`tailwind.config.js`	基于 CSS 的 `@theme` 指令
PostCSS 插件	Oxide 引擎（速度提升 10 倍）
JIT 模式	原生支持，始终启用
插件系统	原生 CSS 功能
`@apply` 指令	仍然可用，但不推荐

v4 核心概念

概念	说明
CSS 优先	在 CSS 中配置，而不是 JavaScript
Oxide 引擎	基于 Rust 的编译器，速度快得多
原生嵌套	无需 PostCSS 的 CSS 嵌套
CSS 变量	所有令牌均以 `--*` 变量形式公开

2. 基于 CSS 的配置

主题定义

@theme {
  /* Colors - use semantic names */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

何时扩展与覆盖

操作	适用场景
扩展	在默认值旁添加新值
覆盖	完全替换默认刻度
语义令牌	项目专属命名（primary、surface）

3. 容器查询（v4 原生支持）

断点与容器

类型	响应对象
断点（`md:`）	视口宽度
容器（`@container`）	父元素宽度

容器查询用法

模式	类
定义容器	在父元素上使用 `@container`
容器断点	在子元素上使用 `@sm:`、`@md:`、`@lg:`
命名容器	使用 `@container/card` 提高特异性

适用场景

场景	用法
页面级布局	视口断点
组件级响应式布局	容器查询
可复用组件	容器查询（与上下文无关）

4. 响应式设计

断点系统

前缀	最小宽度	目标设备
（无）	0px	移动优先基础样式
`sm:`	640px	大屏手机 / 小型平板
`md:`	768px	平板
`lg:`	1024px	笔记本电脑
`xl:`	1280px	桌面设备
`2xl:`	1536px	大型桌面设备

移动优先原则

先编写移动端样式（不加前缀）
使用前缀添加大屏幕覆盖样式
示例：w-full md:w-1/2 lg:w-1/3

5. 深色模式

配置策略

在 v4 中，默认的深色变体遵循媒体查询。若要在 CSS 优先配置中使用类选择器，请定义 @custom-variant dark (&:where(.dark, .dark *));。下表描述的是行为选项，而不是 v4 JavaScript 配置键。

方法	行为	适用场景
`class`	`.dark` 类切换	手动主题切换器
`media`	遵循系统偏好	无用户控制
`selector`	自定义选择器（v4）	复杂主题

深色模式模式

元素	浅色	深色
背景	`bg-white`	`dark:bg-zinc-900`
文本	`text-zinc-900`	`dark:text-zinc-100`
边框	`border-zinc-200`	`dark:border-zinc-700`

6. 现代布局模式

Flexbox 模式

模式	类
居中（两个轴）	`flex items-center justify-center`
垂直堆叠	`flex flex-col gap-4`
水平排列	`flex gap-4`
两端对齐	`flex justify-between items-center`
自动换行网格	`flex flex-wrap gap-4`

Grid 模式

模式	类
自适应填充	`grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]`
非对称布局（Bento）	`grid grid-cols-3 grid-rows-2` 并配合跨行或跨列
侧边栏布局	`grid grid-cols-[auto_1fr]`

注意： 优先选择非对称 / Bento 布局，而不是对称的三列网格。

7. 现代颜色系统

OKLCH 与 RGB/HSL

格式	优势
OKLCH	感知均匀，更适合设计
HSL	色相和饱和度直观
RGB	兼容旧版

颜色令牌架构

层级	示例	用途
基础	`--blue-500`	原始颜色值
语义	`--color-primary`	按用途命名
组件	`--button-bg`	特定于组件

8. 排版系统

字体栈模式

类型	推荐
Sans	`'Inter', 'SF Pro', system-ui, sans-serif`
Mono	`'JetBrains Mono', 'Fira Code', monospace`
Display	`'Outfit', 'Poppins', sans-serif`

字号阶梯

类名	大小	用途
`text-xs`	0.75rem	标签、说明文字
`text-sm`	0.875rem	次要文本
`text-base`	1rem	正文
`text-lg`	1.125rem	引导文本
`text-xl`+	1.25rem+	标题

9. 动画与过渡

内置动画

类名	效果
`animate-spin`	持续旋转
`animate-ping`	提醒脉冲
`animate-pulse`	轻微透明度脉冲
`animate-bounce`	弹跳效果

过渡模式

模式	类名
所有属性	`transition-all duration-200`
特定属性	`transition-colors duration-150`
使用缓动	`ease-out` 或 `ease-in-out`
悬停效果	`hover:scale-105 transition-transform`

10. 提取组件

何时提取

信号	操作
相同的类组合出现 3 次以上	提取组件
状态变体复杂	提取组件
设计系统元素	提取并编写文档

提取方法

方法	适用情况
React/Vue 组件	需要动态行为或 JS
CSS 中的 @apply	静态，不需要 JS
设计令牌	可复用的值

11. 反模式

不要	应该
到处使用任意值	使用设计系统的比例
`!important`	正确修复优先级
内联 `style=`	使用工具类
重复冗长的类列表	提取组件
将 v3 配置与 v4 混用	完全迁移到 CSS 优先模式
大量使用 `@apply`	优先使用组件

12. 性能原则

原则	实现方式
清除未使用内容	v4 中自动完成
避免动态类名	不使用模板字符串类名
使用受支持的构建集成	对实际项目进行基准测试；不存在通用的性能提升
缓存构建	CI/CD 缓存

请记住： Tailwind v4 以 CSS 为先。善用 CSS 变量、容器查询和原生功能。配置文件现在是可选的。

限制

仅当任务明确符合上述范围时，才使用此技能。
不要将输出视为针对特定环境进行验证、测试或专家审查的替代品。
如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。

支持 Markdown

登录后评论