Tailwind 4

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-code