Frontend Tailwind Best Practices

A solid set of opinionated Tailwind conventions that pushes you toward custom stack utilities (v-stack, h-stack) instead of raw flex classes, and enforces the cn() merge pattern for every className prop. The layout rules are the real win here, especially preferring gap over child margins and the responsive stack switching pattern. Also includes guidance on class-based dark mode, affordance patterns, and capability-based responsive design (pointer-coarse vs device sizes). It's prescriptive in a good way. If you're starting a new project or tired of flex flex-col gap-4 everywhere, this gives you a cleaner vocabulary. Just know you'll need to set up those custom utilities in your Tailwind config first.

skills.sh installs: 465
GitHub stars: 92
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add sergiodxa/agent-skills --skill frontend-tailwind-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Best Practices

Styling patterns and conventions for frontend applications. Contains 10 rules covering layout utilities, affordances, color schemes, responsive design, and className handling.

When to Apply

Reference these guidelines when:

Writing component styles with Tailwind
Creating layouts (stacks, grids, centering)
Handling responsive design
Working with color schemes
Merging className props

Rules Summary

Layout Utilities (CRITICAL)

layout-stack-utilities - @rules/layout-stack-utilities.md

Use custom stack utilities instead of flex classes.

// Bad
<div className="flex flex-col gap-4">
<div className="flex flex-row gap-4">

// Good
<div className="v-stack gap-4">
<div className="h-stack gap-4">

Available utilities:

SKILL.md on GitHub