--- name: tailwind-components description: Reusable Tailwind CSS component patterns for consistent UI. Use when creating buttons, cards, forms, tables, modals, navigation, or any UI components with Tailwind CSS. allowed-tools: Read, Grep, Glob, Edit, Write --- # Tailwind Components Skill This skill provides ready-to-use Tailwind CSS component patterns for building consistent, professional UI. ## Button Components ### Primary Buttons ```html

Card Title <\/h3>
Card description goes here with some supporting text. <\/p> <\/div> <\/div> ``` ### Stats Card ```html

2,543<\/h4>
Total Employees<\/p> <\/div> <\/div> ``` ### Card with Header & Actions ```html

Recent Activity<\/h3>
Last 7 days<\/p> <\/div>

2,543<\/h4>
Total Employees<\/p> <\/div> <\/div> ``` ### Card with Header & Actions ```html

Recent Activity<\/h3>
Last 7 days<\/p> <\/div>

Recent Activity<\/h3>
Last 7 days<\/p> <\/div>

Modal Title<\/h3>

No data found<\/h3>
Get started by creating your first item. <\/p>

2,543<\/h4> Total Employees<\/p> <\/div> <\/div> ``` ### Card with Header & Actions ```html Recent Activity<\/h3> Last 7 days<\/p> <\/div>

Recent Activity<\/h3> Last 7 days<\/p> <\/div>

Modal Title<\/h3>

No data found<\/h3> Get started by creating your first item. <\/p>

2,543<\/h4>
Total Employees<\/p> <\/div> <\/div> ``` ### Card with Header & Actions ```html

Recent Activity<\/h3>
Last 7 days<\/p> <\/div>

Recent Activity<\/h3>
Last 7 days<\/p> <\/div>

No data found<\/h3>
Get started by creating your first item. <\/p>