Summary
A practical reference for Tailwind CSS 4 that lays out clear rules: never use var() in className, never use hex colors, and only reach for cn() when you actually have conditional logic or potential class conflicts. The decision tree at the top is genuinely helpful for figuring out whether you need className, style props, or the cn() utility. Also includes a smart pattern for chart libraries like Recharts that can't accept className, where you define color constants with var() for their props. The examples cover the usual suspects like flexbox, grid, and responsive design, but the real value is in the "never do this" sections that prevent common mistakes. Straightforward and opinionated in a good way.
Install to Claude Code
npx -y skills add gentleman-programming/gentleman-skills --skill tailwind-4 --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 →
