tailwind-components
Installation
SKILL.md
Tailwind CSS Components
1. Component Class Patterns
Standard Tailwind class recipes for common UI components. Use these as the baseline and extend as needed.
1.1 Buttons
| Variant | Classes |
|---|---|
| Primary | rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 |
| Secondary | rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 |
| Soft | rounded-md bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 |
| Danger | rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 |
| Ghost | rounded-md px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50 |
| Icon only | rounded-full p-2 text-gray-400 hover:text-gray-500 |
| Disabled (any) | Add disabled:opacity-50 disabled:cursor-not-allowed |