tailwind-v4-best-practices
Tailwind CSS v4 Best Practices
Production-grade Tailwind CSS v4 with a focus on design system thinking, maintainability, and performance.
Core Principles
1. Design Tokens, Not Direct Colors
Use semantic tokens instead of Tailwind's default color palette. This enables theme switching without touching components.
<!-- ❌ Direct colors — breaks when you rebrand -->
<button class="bg-blue-500 text-white hover:bg-blue-600">
<span class="text-red-600">Error</span>
<!-- ✅ Semantic tokens — theme-aware -->
<button class="bg-primary text-primary-foreground hover:bg-primary-hover">
<span class="text-error">Error</span>
More from jenishshrestha/ai-skills
fdd-architecture
Feature-Driven Development architecture and React coding standards for React + Vite applications. Use this skill when organizing features, structuring components, setting up imports, designing folder architecture, writing new components, or building new features in React apps. Also use when the user asks about project structure, feature organization, component placement, code quality principles (KISS, SOLID, YAGNI), or React patterns like hook extraction and composition. Apply these standards during active coding, not just review.
28code-review
Validates code against project skills and standards. Use this skill when the user asks for a "code review", "review this PR", "check this code", "security audit", or wants to verify code matches project conventions. This skill does not define its own architectural or styling standards — it checks code against FDD-architecture, tailwind-v4-best-practices, and frontend security best practices. Also use this when merging, approving PRs, or when the user asks "does this follow our standards?
26