Summary
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.
Install to Claude Code
npx -y skills add asyrafhussin/agent-skills --skill tailwind-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
