# Tailwind CSS Patterns

> Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

- Skill: `ihj04982/tailwind-css-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ihj04982/tailwind-css-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ihj04982/tailwind-css-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: ihj04982 (https://skillmd.com/u/ihj04982)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/ihj04982/tailwind-css-patterns

---


# Tailwind CSS Development Patterns

Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).

## When to Use

- Styling React/HTML components with utility classes
- Building responsive layouts with breakpoints
- Flexbox and grid layouts, spacing, typography, colors
- Custom design systems, mobile-first, dark mode

## Core Concepts

**Utility-first:** Apply styles in markup (e.g. `bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`).

**Responsive:** Mobile-first breakpoints: `sm:` 640px, `md:` 768px, `lg:` 1024px, `xl:` 1280px, `2xl:` 1536px. Example: `w-full md:w-1/2 lg:w-1/3`.

## Additional Resources

For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see [reference.md](reference.md).