Tailwind Best Practices

AI coding agents keep generating Tailwind v3 code because that's what they were trained on, which means you'll get outdated @tailwind directives, JavaScript config files, and deprecated utilities like bg-opacity-50. This skill enforces v4 patterns: CSS-first configuration with @theme blocks, the single @import "tailwindcss" entry point, slash modifier syntax for opacity, and renamed utilities like shadow-xs instead of shadow-sm. It covers a dozen critical rules with wrong/correct examples. If you're working on any Tailwind project and tired of fixing the same v3 patterns Claude generates, this will save you constant corrections.

Install to Claude Code

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