--- name: tailwind-patterns description: Tailwind CSS utility patterns and best practices user-invocable: false --- # Tailwind Patterns Skill Patterns for using Tailwind CSS effectively. ## Layout Patterns ### Flexbox ```html

Centered content<\/div> <\/div>

Left<\/div>

Right<\/div> <\/div>

Item 1<\/div>

Item 2<\/div>

Item 3<\/div> <\/div>

Fixed<\/div>

Grows<\/div> <\/div> ``` ### Grid ```html

1<\/div>

2<\/div>

3<\/div> <\/div>

Card 1<\/div>

Card 2<\/div>

Card 3<\/div>

Card 4<\/div> <\/div>

Wide<\/div>

Normal<\/div>

Normal<\/div> <\/div>

Auto-sized card<\/div> <\/div> ``` ### Container ```html

Content with max-width and horizontal padding <\/div>

Content with specific max-width <\/div> ``` ## Typography ### Text Styles ```html

Heading 1<\/h1>

Heading 2<\/h2>

Heading 3<\/h3>
Body text with comfortable line height <\/p> Caption text<\/span>
Underlined<\/p>
Strikethrough<\/p>
Long text that gets truncated...<\/p>
Text clamped to 3 lines...<\/p> ``` ### Font Weights and Sizes ```html
100<\/p>
300<\/p>
400<\/p>
500<\/p>
600<\/p>
700<\/p>
800<\/p> ``` ## Spacing ### Padding and Margin ```html
...<\/div>
...<\/div>
...<\/div>
...<\/div>
...<\/div>
...<\/div>

Item 1<\/div>
Item 2<\/div>
Item 3<\/div> <\/div> ``` ## Colors ### Background and Text ```html
...<\/div>
...<\/div>
50% opacity background<\/div>
75% opacity text<\/div>
Gradient background <\/div>
Three-stop gradient <\/div> ``` ### Borders ```html
...<\/div>
...<\/div>
Bottom border only<\/div>
Left accent<\/div>
Small radius<\/div>
Large radius<\/div>
Full (pill\/circle)<\/div>
Top only<\/div> ``` ## Responsive Design ### Breakpoints ```html
Responsive text size <\/div>
Hidden on mobile, visible on tablet+ <\/div>
Visible on mobile only <\/div>
... <\/div>
... <\/div> ``` ### Breakpoint Reference ``` sm: 640px @media (min-width: 640px) md: 768px @media (min-width: 768px) lg: 1024px @media (min-width: 1024px) xl: 1280px @media (min-width: 1280px) 2xl: 1536px @media (min-width: 1536px) ``` ## States ### Hover, Focus, Active ```html