# Tailwind

> Tailwind CSS utility-first patterns and best practices. Trigger: When styling with Tailwind CSS utility classes.

- Skill: `odjaramillo/tailwind` (Agent Skill)
- Install (CLI): `npx skillmds@latest add odjaramillo/tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/odjaramillo/tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: odjaramillo (https://skillmd.com/u/odjaramillo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/odjaramillo/tailwind

---


## Critical Patterns

### Responsive Design (REQUIRED)

```html
<!-- ✅ ALWAYS: Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on mobile, half on medium, third on large -->
</div>
```

### Component Extraction (REQUIRED)

```jsx
// ✅ ALWAYS: Extract repeated patterns to components
function Button({ variant = 'primary', children }) {
  const base = 'px-4 py-2 rounded font-medium transition';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };

  return <button className={`${base} ${variants[variant]}`}>{children}</button>;
}
```

### Dark Mode (REQUIRED)

```html
<!-- ✅ Use dark: prefix for dark mode -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">Content</div>
```

---

## Decision Tree

```
Need spacing?              → Use p-*, m-*, gap-*
Need sizing?               → Use w-*, h-*, max-w-*
Need colors?               → Use bg-*, text-*, border-*
Need responsive?           → Use sm:, md:, lg:, xl:
Need states?               → Use hover:, focus:, active:
Need animations?           → Use animate-*, transition-*
```

---

## Commands

```bash
npx tailwindcss init -p    # Initialize with PostCSS
npx tailwindcss -o output.css --minify  # Build for production
```