Tailwind Best Practices

This is a comprehensive reference for writing maintainable Tailwind CSS, covering both v3 and v4. It automatically detects your version and applies the right patterns, which matters because v4 fundamentally changed how configuration works (CSS-based @theme instead of tailwind.config.js). You get 29 rules across responsive design, dark mode, component variants with clsx/cn utilities, and a full migration guide. The mobile-first examples and conditional class patterns are solid, and the version detection step saves you from mixing incompatible approaches. Most useful when you're setting up dark mode, building component libraries, or migrating an existing project to v4.

skills.sh installs: 1K
GitHub stars: 102
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Tailwind CSS Best Practices

Comprehensive patterns for building consistent, maintainable interfaces with Tailwind CSS v3.4+ and v4. Contains 29 rules covering responsive design, dark mode, component patterns, configuration, and v4 migration.

Metadata

Version: 1.0.0
Framework: Tailwind CSS v3.4+ / v4.0+
Rule Count: 29 rules across 8 categories
License: MIT
Documentation: tailwindcss.com/docs

Step 1: Detect Tailwind Version

Always check the version before giving any advice. v3 and v4 are fundamentally different.

Check package.json for the installed version:

{ "tailwindcss": "^3.x" }  // → v3 rules apply
{ "tailwindcss": "^4.x" }  // → v4 rules apply

Also check for these signals:

Signal	Version
`tailwind.config.js` exists	v3
`@import "tailwindcss"` in CSS	v4
`@tailwindcss/vite` in dependencies	v4
`@tailwindcss/postcss` in dependencies	v4
`@theme {}` block in CSS	v4