Tailwind UI Templates
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.
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)
Template Discovery
1. Search the Index
# 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 .
2. Understand the Hierarchy
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. Read the Template
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.
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 |
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.
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
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.