Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, p

Tailwind CSS development Documentation Use search docs for detailed Tailwind CSS v3 patterns and documentation. Basic usage Use Tailwind CSS classes to style HTML. Before introducing new patterns, check and follow the project's existing Tailwind conventions. Offer to extract repeated patterns into components that match the project's conventions, such as Blade, JSX, or Vue components. Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically. Tailwind CSS v3 specifics Always use Tailwind CSS v3 and verify that you use only classes it supports. Configure Tailwind in the tailwind.config.js file. Import Tailwind with the @tailwind directives: <! v3 Import Syntax Spacing When listing items, use gap utilities for spacing. Don't use margins. <! Gap Utilities Dark mode If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant: <! Dark Mode Common patterns Flexbox layout <! Flexbox Layout Grid layout <! Grid Layout Verification 1. Check the visual rendering in the browser 2. Test responsive breakpoints 3. If the project uses dark mode, verify it Common pitfalls Using margins for spacing between siblings instead of gap utilities Forgetting to add dark mode variants when the project uses dark mode Not checking existing project conventions before adding new utilities Overusing inline styles when Tailwind classes would suffice

tailwindcss-development