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, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.
Use search-docs for detailed Tailwind CSS v3 patterns and documentation.
tailwind.config.js file.@tailwind directives:@tailwind base;
@tailwind components;
@tailwind utilities;
When listing items, use gap utilities for spacing; don't use margins.
<div class="flex gap-8">
<div>Item 1</div>
<div>Item 2</div>
</div>
If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant:
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
Content adapts to color scheme
</div>
<div class="flex items-center justify-between gap-4">
<div>Left content</div>
<div>Right content</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>