Tailwind Patterns

davila7/claude-code-templates/cli-tool/components/skills/creative-design/tailwind-patterns

作者 davila78da17d671b6f无许可证32K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

仅含说明Software Development Design & Creative

AI 生成的概览

Tailwind CSS v4 模式参考指南，涵盖 CSS 优先配置、容器查询、设计令牌与布局。

功能: 该技能提供 Tailwind CSS v4 的参考内容：基于 CSS 的 @theme 配置、容器查询、响应式断点、深色模式、布局、颜色与字体系统、动画、组件抽取、反模式以及性能要点。内容以表格和简短说明呈现，而非可执行代码，本身不生成文件或产物。其用途是指导智能体如何编写或审查 Tailwind 标记与配置。
适用场景: 在编写或审查 Tailwind CSS v4 样式、搭建 CSS 优先主题，或在容器查询与视口断点之间做选择时使用。它也适用于定义设计令牌、深色模式策略或组件抽取规则。
运行要求: 无需脚本、软件包或凭据，仅为纯说明性参考内容。智能体需要项目文件的读写权限以应用这些指导。

Tailwind CSS Patterns (v4 - 2025)

Modern utility-first CSS with CSS-native configuration.

1. Tailwind v4 Architecture

What Changed from v3

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

v4 Core Concepts

2. CSS-Based Configuration

Theme Definition

@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;}

@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;}

When to Extend vs Override

3. Container Queries (v4 Native)

Breakpoint vs Container

Container Query Usage

When to Use

4. Responsive Design

Breakpoint System

Mobile-First Principle

Write mobile styles first (no prefix)
Add larger screen overrides with prefixes
Example: w-full md:w-1/2 lg:w-1/3

5. Dark Mode

Configuration Strategies

Dark Mode Pattern

6. Modern Layout Patterns

Flexbox Patterns

Grid Patterns

Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.

7. Modern Color System

OKLCH vs RGB/HSL

Color Token Architecture

8. Typography System

Font Stack Pattern

Type Scale

9. Animation & Transitions

Built-in Animations

Transition Patterns

10. Component Extraction

When to Extract

Extraction Methods

11. Anti-Patterns

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

12. Performance Principles

Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.

来源与署名

来源：davila7/claude-code-templates位于cli-tool/components/skills/creative-design/tailwind-patterns提交8da17d6

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

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

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:`	1536px	Large desktop

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`