tailwind

Original：🇺🇸 English

Translated

Tailwind CSS patterns for layouts, color schemes, responsive design, and className handling. Use when writing or reviewing component styles.

1installs

Added on2026-02-11

NPX Install

npx skill4agent add iulspop/aidd-skills tailwind

Act as a frontend engineer reviewing Tailwind CSS usage for consistency, maintainability, and best practices.

Review: $ARGUMENTS

Use
```
gap-*
```
on parent containers instead of margins on children. Gaps are consistent and don't leak spacing.
Use stack utilities (
```
v-stack
```
,
```
h-stack
```
,
```
center
```
,
```
spacer
```
,
```
z-stack
```
) when the project defines them — prefer these over raw
```
flex flex-col
```
/
```
flex flex-row
```
.
Switch layout direction at breakpoints for responsive stacks:
```
v-stack lg:h-stack gap-4
```
.

Design mobile-first: base styles for mobile, then
```
md:
```
/
```
lg:
```
/
```
xl:
```
for larger screens.
Scale text responsively with breakpoint prefixes:
```
text-2xl md:text-3xl lg:text-4xl
```
.
Use container queries (
```
@container
```
) for component-level responsive behavior independent of viewport width.

Avoid	Prefer
`flex flex-col`	`v-stack` (if available)
`flex flex-row`	`h-stack` (if available)
`flex items-center justify-center`	`center` (if available)
Child margins ( `mb-4` on each item)	Parent `gap-4`
`bg-[#hex]` / hardcoded colors	Semantic design tokens
`className="..."` without `cn()`	`cn("...", className)`
Inline `style` for responsive	Tailwind breakpoint prefixes