tailwind-patterns by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill tailwind-patterns采用 CSS 原生配置的现代实用优先 CSS。
| v3 (旧版) | v4 (当前版) |
|---|---|
tailwind.config.js | 基于 CSS 的 @theme 指令 |
| PostCSS 插件 | Oxide 引擎 (快 10 倍) |
| JIT 模式 | 原生,始终开启 |
| 插件系统 | CSS 原生功能 |
@apply 指令 | 仍然有效,但不推荐使用 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 概念 | 描述 |
|---|
| CSS 优先 | 配置在 CSS 中,而非 JavaScript |
| Oxide 引擎 | 基于 Rust 的编译器,速度更快 |
| 原生嵌套 | 无需 PostCSS 的 CSS 嵌套 |
| CSS 变量 | 所有标记都暴露为 --* 变量 |
@theme {
/* 颜色 - 使用语义化名称 */
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
/* 间距比例 */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* 排版 */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
| 操作 | 使用场景 |
|---|---|
| 扩展 | 在默认值基础上添加新值 |
| 覆盖 | 完全替换默认比例 |
| 语义化标记 | 项目特定的命名 (primary, surface) |
| 类型 | 响应对象 |
|---|---|
断点 (md:) | 视口宽度 |
容器 (@container) | 父元素宽度 |
| 模式 | 类 |
|---|---|
| 定义容器 | 在父元素上使用 @container |
| 容器断点 | 在子元素上使用 @sm:, @md:, @lg: |
| 命名容器 | 使用 @container/card 以提高特异性 |
| 场景 | 使用 |
|---|---|
| 页面级布局 | 视口断点 |
| 组件级响应式 | 容器查询 |
| 可复用组件 | 容器查询 (上下文无关) |
| 前缀 | 最小宽度 | 目标设备 |
|---|---|---|
| (无) | 0px | 移动优先基础 |
sm: | 640px | 大手机 / 小平板 |
md: | 768px | 平板电脑 |
lg: | 1024px | 笔记本电脑 |
xl: | 1280px | 台式机 |
2xl: | 1536px | 大屏台式机 |
w-full md:w-1/2 lg:w-1/3| 方法 | 行为 | 使用场景 |
|---|---|---|
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 |
| 模式 | 类 |
|---|---|
| 居中 (双轴) | 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-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| 非对称 (Bento) | grid grid-cols-3 grid-rows-2 配合 span |
| 侧边栏布局 | grid grid-cols-[auto_1fr] |
注意: 优先选择非对称/Bento 布局,而非对称的三列网格。
| 格式 | 优势 |
|---|---|
| OKLCH | 感知均匀,更适合设计 |
| HSL | 直观的色调/饱和度 |
| RGB | 向后兼容 |
| 层级 | 示例 | 用途 |
|---|---|---|
| 基础色 | --blue-500 | 原始颜色值 |
| 语义色 | --color-primary | 基于用途的命名 |
| 组件色 | --button-bg | 组件特定 |
| 类型 | 推荐 |
|---|---|
| 无衬线 | 'Inter', 'SF Pro', system-ui, sans-serif |
| 等宽 | 'JetBrains Mono', 'Fira Code', monospace |
| 展示 | 'Outfit', 'Poppins', sans-serif |
| 类 | 大小 | 用途 |
|---|---|---|
text-xs | 0.75rem | 标签、说明文字 |
text-sm | 0.875rem | 次要文本 |
text-base | 1rem | 正文文本 |
text-lg | 1.125rem | 引导文本 |
text-xl+ | 1.25rem+ | 标题 |
| 类 | 效果 |
|---|---|
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 |
| 信号 | 操作 |
|---|---|
| 相同类组合出现 3 次以上 | 提取组件 |
| 复杂状态变体 | 提取组件 |
| 设计系统元素 | 提取 + 文档化 |
| 方法 | 使用场景 |
|---|---|
| React/Vue 组件 | 动态,需要 JS |
| CSS 中的 @apply | 静态,无需 JS |
| 设计标记 | 可复用的值 |
| 不要 | 要 |
|---|---|
| 到处使用任意值 | 使用设计系统比例 |
使用 !important | 正确修复特异性 |
内联 style= | 使用实用类 |
| 重复冗长的类列表 | 提取组件 |
| 混合 v3 配置与 v4 | 完全迁移到 CSS 优先 |
大量使用 @apply | 优先使用组件 |
| 原则 | 实现 |
|---|---|
| 清除未使用的 | v4 中自动完成 |
| 避免动态性 | 不使用模板字符串类 |
| 使用 Oxide | v4 默认,快 10 倍 |
| 缓存构建 | CI/CD 缓存 |
记住: Tailwind v4 是 CSS 优先的。拥抱 CSS 变量、容器查询和原生功能。配置文件现在是可选的。
每周安装量
285
代码仓库
GitHub 星标数
22.6K
首次出现
2026年1月25日
安全审计
安装于
opencode233
gemini-cli224
codex220
github-copilot213
claude-code203
cursor173
Modern utility-first CSS with CSS-native configuration.
| v3 (Legacy) | v4 (Current) |
|---|---|
tailwind.config.js | CSS-based @theme directive |
| PostCSS plugin | Oxide engine (10x faster) |
| JIT mode | Native, always-on |
| Plugin system | CSS-native features |
@apply directive | Still works, discouraged |
| Concept | Description |
|---|---|
| CSS-first | Configuration in CSS, not JavaScript |
| Oxide Engine | Rust-based compiler, much faster |
| Native Nesting | CSS nesting without PostCSS |
| CSS Variables | All tokens exposed as --* vars |
@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;
}
| Action | Use When |
|---|---|
| Extend | Adding new values alongside defaults |
| Override | Replacing default scale entirely |
| Semantic tokens | Project-specific naming (primary, surface) |
| Type | Responds To |
|---|---|
Breakpoint (md:) | Viewport width |
Container (@container) | Parent element width |
| Pattern | Classes |
|---|---|
| Define container | @container on parent |
| Container breakpoint | @sm:, @md:, @lg: on children |
| Named containers | @container/card for specificity |
| Scenario | Use |
|---|---|
| Page-level layouts | Viewport breakpoints |
| Component-level responsive | Container queries |
| Reusable components | Container queries (context-independent) |
| Prefix | Min Width | Target |
|---|---|---|
| (none) | 0px | Mobile-first base |
sm: | 640px | Large phone / small tablet |
md: | 768px | Tablet |
lg: | 1024px | Laptop |
xl: | 1280px | Desktop |
2xl: |
w-full md:w-1/2 lg:w-1/3| Method | Behavior | Use When |
|---|---|---|
class | .dark class toggles | Manual theme switcher |
media | Follows system preference | No user control |
selector | Custom selector (v4) | Complex theming |
| Element | Light | Dark |
|---|---|---|
| Background | bg-white | dark:bg-zinc-900 |
| Text | text-zinc-900 | dark:text-zinc-100 |
| Borders | border-zinc-200 | dark:border-zinc-700 |
| Pattern | Classes |
|---|---|
| Center (both axes) | flex items-center justify-center |
| Vertical stack | flex flex-col gap-4 |
| Horizontal row | flex gap-4 |
| Space between | flex justify-between items-center |
| Wrap grid | flex flex-wrap gap-4 |
| Pattern | Classes |
|---|---|
| Auto-fit responsive | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| Asymmetric (Bento) | grid grid-cols-3 grid-rows-2 with spans |
| Sidebar layout | grid grid-cols-[auto_1fr] |
Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.
| Format | Advantage |
|---|---|
| OKLCH | Perceptually uniform, better for design |
| HSL | Intuitive hue/saturation |
| RGB | Legacy compatibility |
| Layer | Example | Purpose |
|---|---|---|
| Primitive | --blue-500 | Raw color values |
| Semantic | --color-primary | Purpose-based naming |
| Component | --button-bg | Component-specific |
| Type | Recommended |
|---|---|
| Sans | 'Inter', 'SF Pro', system-ui, sans-serif |
| Mono | 'JetBrains Mono', 'Fira Code', monospace |
| Display | 'Outfit', 'Poppins', sans-serif |
| Class | Size | Use |
|---|---|---|
text-xs | 0.75rem | Labels, captions |
text-sm | 0.875rem | Secondary text |
text-base | 1rem | Body text |
text-lg | 1.125rem | Lead text |
text-xl+ | 1.25rem+ | Headings |
| Class | Effect |
|---|---|
animate-spin | Continuous rotation |
animate-ping | Attention pulse |
animate-pulse | Subtle opacity pulse |
animate-bounce | Bouncing effect |
| Pattern | Classes |
|---|---|
| All properties | transition-all duration-200 |
| Specific | transition-colors duration-150 |
| With easing | ease-out or ease-in-out |
| Hover effect | hover:scale-105 transition-transform |
| Signal | Action |
|---|---|
| Same class combo 3+ times | Extract component |
| Complex state variants | Extract component |
| Design system element | Extract + document |
| Method | Use When |
|---|---|
| React/Vue component | Dynamic, JS needed |
| @apply in CSS | Static, no JS needed |
| Design tokens | Reusable values |
| Don't | Do |
|---|---|
| Arbitrary values everywhere | Use design system scale |
!important | Fix specificity properly |
Inline style= | Use utilities |
| Duplicate long class lists | Extract component |
| Mix v3 config with v4 | Migrate fully to CSS-first |
Use @apply heavily | Prefer components |
| Principle | Implementation |
|---|---|
| Purge unused | Automatic in v4 |
| Avoid dynamism | No template string classes |
| Use Oxide | Default in v4, 10x faster |
| Cache builds | CI/CD caching |
Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.
Weekly Installs
285
Repository
GitHub Stars
22.6K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode233
gemini-cli224
codex220
github-copilot213
claude-code203
cursor173
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
105,000 周安装
Worktrunk CLI 工具:高效管理 Git Worktree,自动化开发工作流
308 周安装
viem 集成指南:为 TypeScript/JavaScript 应用连接 EVM 区块链
308 周安装
Appwrite TypeScript SDK 使用指南 - 客户端与服务器端开发教程
309 周安装
React Native 棕地迁移指南:逐步集成到原生应用(Expo/裸RN)
309 周安装
best-minds:基于专家模拟的AI提问框架,提升LLM回答质量与专业性
309 周安装
Tailwind CSS 高级设计系统教程 - 使用@theme构建企业级设计令牌与样式指南
309 周安装
| 1536px |
| Large desktop |