tailwind-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind UI Templates

Tailwind UI 模板

Overview

概述

Always search templates before writing Tailwind UI code from scratch.

You have access to 657 hand-crafted Tailwind UI templates in

assets/

. These templates include dark mode, accessibility, polish, and edge case handling that you won't replicate from scratch.

在从零开始编写Tailwind UI代码之前，请务必先搜索模板。

你可以在

assets/

目录下访问657个手工制作的Tailwind UI模板。这些模板包含了深色模式、无障碍支持、细节优化和边缘场景处理，这些都是你从零开始编写很难复刻的内容。

When to Use

适用场景

Use this skill when:

Building any common UI component (hero, navbar, form, list, card, modal, etc.)
Writing HTML/JSX with Tailwind CSS classes
Need professional-quality, accessible, responsive UI

Skip for:

Minor styling tweaks to existing code
Non-UI code (logic, data, APIs)

以下情况使用本技能：

构建任何常见UI组件（首屏区块、导航栏、表单、列表、卡片、模态框等）
使用Tailwind CSS类编写HTML/JSX
需要专业质量、无障碍支持、响应式的UI

以下情况跳过使用：

对现有代码做小幅样式调整
非UI代码（逻辑、数据、API）

Template Discovery

模板查找

1. Search the Index

1. 搜索索引

bash

undefined

bash

undefined

Find templates by keyword

grep -i "hero" assets/index.jsonl | jq .

Browse by category

grep '"category":"marketing"' assets/index.jsonl | jq -r '.subsection' | sort | uniq

Find specific component type

grep -i "stacked.*list" assets/index.jsonl | jq .

undefined

grep -i "stacked.*list" assets/index.jsonl | jq .

undefined

2. Understand the Hierarchy

2. 理解层级结构

Category (3): marketing, application-ui, ecommerce
  └─ Section: Page Sections, Elements, Forms, etc.
      └─ Subsection: Hero Sections, Feature Sections, Stacked Lists, etc.
          └─ Component: "Simple centered", "Split with screenshot", etc.

Category (3): marketing, application-ui, ecommerce
  └─ Section: Page Sections, Elements, Forms, etc.
      └─ Subsection: Hero Sections, Feature Sections, Stacked Lists, etc.
          └─ Component: "Simple centered", "Split with screenshot", etc.

分类共3种：营销页面、应用UI、电商 └─ 板块：页面区块、元素、表单等 └─ 子板块：首屏区块、功能区块、堆叠列表等 └─ 组件：“简单居中”、“带截图拆分布局”等

3. Read the Template

3. 查看模板

assets/code/{version}/{language}/{category}/{subsection}/{slug}.{ext}

Examples:
  assets/code/v4/html/marketing/hero-sections/simple-centered.html
  assets/code/v4/react/application-ui/stacked-lists/with-badges.tsx
  assets/code/v4/vue/ecommerce/product-pages/with-image-grid.vue

Always prefer v4 (latest Tailwind CSS). Use v3 only for legacy projects.

assets/code/{version}/{language}/{category}/{subsection}/{slug}.{ext}

Examples:
  assets/code/v4/html/marketing/hero-sections/simple-centered.html
  assets/code/v4/react/application-ui/stacked-lists/with-badges.tsx
  assets/code/v4/vue/ecommerce/product-pages/with-image-grid.vue

优先选择v4版本（最新的Tailwind CSS），仅在老旧项目中使用v3版本。

Usage Modes

使用模式

Mode	When	How
Verbatim	Template matches exactly	Copy template, swap placeholder content
Modify	Template is close	Start from template, adjust structure/styling
Synthesize	Need combination	Study 2-3 similar templates, combine patterns
Learn & Create	No exact match	Find closest templates, extract patterns, apply to novel component

模式	适用场景	使用方法
直接复用	模板完全匹配需求	复制模板，替换占位内容
调整修改	模板和需求接近	基于模板开发，调整结构/样式
组合整合	需要结合多种特性	研究2-3个相似模板，组合对应模式
学习后创建	没有完全匹配的模板	找到最接近的模板，提取通用模式，应用到新组件上

When No Exact Template Exists

没有完全匹配的模板时

Never write truly from scratch. Even for novel components, find inspiration and patterns in existing templates. This ensures your code is consistent with Tailwind UI conventions even when no template exists.

绝对不要完全从零开始编写代码。 即便是全新的组件，也要从现有模板中寻找灵感和通用模式。即便没有完全匹配的模板，这也能保证你的代码符合Tailwind UI的规范约定。

Template Qualities to Preserve

需要保留的模板特性

Tailwind UI templates include polish you'll lose if writing from scratch:

Dark mode:
```
dark:
```
variants throughout
Accessibility:
```
aria-*
```
attributes, semantic HTML, focus states
Responsive: Mobile-first with
```
sm:
```
,
```
md:
```
,
```
lg:
```
breakpoints

Focus states:

focus-visible:outline-2 focus-visible:outline-offset-2

Subtle polish:
```
text-pretty
```
,
```
shadow-xs
```
, gradient masks, decorative SVGs

Tailwind UI模板包含了很多你从零编写会丢失的细节优化：

深色模式：全量覆盖
```
dark:
```
变体
无障碍支持：
```
aria-*
```
属性、语义化HTML、聚焦状态
响应式适配：移动优先，包含
```
sm:
```
、
```
md:
```
、
```
lg:
```
断点

聚焦状态：

focus-visible:outline-2 focus-visible:outline-offset-2

细节优化：
```
text-pretty
```
、
```
shadow-xs
```
、渐变遮罩、装饰性SVG

Red Flags

危险信号

If you catch yourself doing any of these, STOP and search templates:

"Let me write a quick hero section"
"I'll just add some Tailwind classes"
"This is a simple component"
"I know how to do this"
"There's no template for this" → Find similar ones and learn patterns!

657 templates exist. One is probably close, or several can teach you the patterns.

如果你发现自己有以下想法，请立刻停止并搜索模板：

"我快速写个首屏区块就行"
"我就加几个Tailwind类"
"这个组件很简单"
"我知道怎么写"
"没有匹配这个需求的模板" → 找相似的模板，学习通用模式！

共有657个模板，总有一个接近你的需求，或者你可以从多个模板中学习到适用的模式。