tailwindcss-development_skill

Overview

This skill styles applications using Tailwind CSS v3 utilities with a focus on predictable, maintainable UI in Laravel projects. It activates when adding or changing classes, working on layouts, responsive behavior, dark mode, typography, or component restyling. The goal is consistent conventions, reusable components, and fewer styling regressions.

How this skill works

I inspect templates and frontend files for Tailwind usage, suggest class-level fixes, and propose component extraction for repeated patterns (Blade, JSX, Vue). I validate that classes are v3-compatible, recommend gap-based spacing, ensure dark mode variants match the project, and point out redundant or conflicting utilities. I also remind you to update tailwind.config.js when custom tokens or breakpoints are needed.

When to use it

• Adding or restyling components or pages
• Implementing or verifying responsive breakpoints
• Enabling or auditing dark mode support
• Refactoring repeated utility sets into components
• Debugging spacing, flex, or grid layout issues

Best practices

• Follow existing project Tailwind conventions before introducing new patterns
• Prefer gap utilities for sibling spacing instead of margins
• Group and order classes for readability and remove redundant utilities
• Support dark mode consistently using dark: variants when the project uses it
• Use tailwind.config.js for custom colors, spacing, and responsive breakpoints

Example use cases

• Style a hero section with responsive typography and background gradient
• Convert repeated card markup into a reusable Blade/Vue component with shared classes
• Fix layout breakpoints where grid collapses unexpectedly on mobile
• Add dark mode variants to a new page to match global theme behavior
• Replace inline styles with Tailwind utilities and update tailwind.config.js for custom tokens