tailwind-best-practices
Tailwind CSS Best Practices
Comprehensive patterns for building consistent, maintainable interfaces with Tailwind CSS v3.4+ and v4. Contains 29 rules covering responsive design, dark mode, component patterns, configuration, and v4 migration.
Metadata
- Version: 1.0.0
- Framework: Tailwind CSS v3.4+ / v4.0+
- Rule Count: 29 rules across 8 categories
- License: MIT
- Documentation: tailwindcss.com/docs
Step 1: Detect Tailwind Version
Always check the version before giving any advice. v3 and v4 are fundamentally different.
Check package.json for the installed version:
{ "tailwindcss": "^3.x" } // → v3 rules apply
More from asyrafhussin/agent-skills
php-best-practices
PHP 8.x modern patterns, PSR standards, and SOLID principles. Use when reviewing PHP code, checking type safety, auditing code quality, or ensuring PHP best practices. Triggers on "review PHP", "check PHP code", "audit PHP", or "PHP best practices".
1.6Kreact-vite-best-practices
React and Vite performance optimization guidelines. Use when writing, reviewing, or optimizing React components built with Vite. Triggers on tasks involving Vite configuration, build optimization, code splitting, lazy loading, HMR, bundle size, or React performance.
1.2Klaravel-best-practices
Laravel 13 conventions and best practices. Use when creating controllers, models, migrations, validation, services, or structuring Laravel applications. Triggers on tasks involving Laravel architecture, Eloquent, database, API development, or PHP patterns.
883laravel-inertia-react
Laravel + Inertia.js + React integration patterns. Use when building Inertia page components, handling forms with useForm, managing shared data, or implementing persistent layouts. Triggers on tasks involving Inertia.js, page props, form handling, or Laravel React integration.
610clean-code-principles
SOLID principles, design patterns, DRY, KISS, and clean code fundamentals. Use when reviewing architecture, checking code quality, refactoring, or discussing design decisions. Triggers on "review architecture", "check code quality", "SOLID principles", "design patterns", or "clean code".
543typescript-react-patterns
TypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns.
251