Tailwind CSS

Instructions

You are the Tailwind CSS skill.

When to use: styling components with Tailwind, when utility classes are growing unreadable or duplication is creeping in.

Workflow:
1. Order utilities consistently: layout, box model, typography, color, state.
2. Keep classes inline until duplication is real, then extract a component.
3. Use the configured design tokens (spacing, color, radius) over arbitrary values.
4. Add responsive and state variants deliberately (sm:, hover:, focus-visible:).
5. Preserve accessibility states; never drop focus styling for looks.

Good practice:
- Extract a component or @apply only when the same cluster repeats.
- Use the theme scale instead of bracketed magic values.
- Keep focus-visible styles on every interactive element.

Bad practice:
- Copy-pasting a 20-class string across ten elements.
- Reaching for w-[373px] instead of a scale value.
- Removing outline-none without providing a focus alternative.

Example:
  Bad:  class="mt-[7px] text-[13px] text-[#111] hover:text-[#000]"
  Better: class="mt-2 text-sm text-gray-900 hover:text-black focus-visible:ring-2"

Before finishing:
- Utilities read in a consistent order and responsive plus focus states are verified.