home / skills / 0xdarkmatter / claude-mods / tailwind-patterns

tailwind-patterns skill

safe

This skill provides quick Tailwind CSS practical patterns and breakpoints, enabling responsive layouts, dark mode, and common components.

npx playbooks add skill 0xdarkmatter/claude-mods --skill tailwind-patterns

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

2.2 KB

---
name: tailwind-patterns
description: "Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes."
compatibility: "For projects using Tailwind CSS v3+."
allowed-tools: "Read Write"
---

# Tailwind Patterns

Quick reference for Tailwind CSS utility patterns.

## Responsive Breakpoints

| Prefix | Min Width |
|--------|-----------|
| `sm:` | 640px |
| `md:` | 768px |
| `lg:` | 1024px |
| `xl:` | 1280px |
| `2xl:` | 1536px |

```html
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full on mobile, half on tablet, third on desktop -->
</div>
```

## Common Layout Patterns

```html
<!-- Centered container -->
<div class="container mx-auto px-4">

<!-- Flexbox row -->
<div class="flex items-center justify-between gap-4">

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Stack -->
<div class="flex flex-col gap-4">
```

## Card

```html
<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold mb-2">Title</h3>
  <p class="text-gray-600">Content</p>
</div>
```

## Button

```html
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
  Button
</button>
```

## Form Input

```html
<input type="text"
  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="Enter text">
```

## Dark Mode

```html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
```

```js
// tailwind.config.js
module.exports = { darkMode: 'class' }
```

## State Modifiers

| Modifier | Triggers On |
|----------|-------------|
| `hover:` | Mouse hover |
| `focus:` | Element focused |
| `active:` | Being clicked |
| `disabled:` | Disabled state |
| `group-hover:` | Parent hovered |

## Spacing Scale

| Class | Size |
|-------|------|
| `p-1` | 4px |
| `p-2` | 8px |
| `p-4` | 16px |
| `p-6` | 24px |
| `p-8` | 32px |

## Arbitrary Values

```html
<div class="w-[137px] h-[calc(100vh-64px)]">
```

## Additional Resources

For detailed patterns, load:
- `./references/component-patterns.md` - Navbar, cards, forms, alerts, loading states

Overview

This skill is a quick reference for Tailwind CSS utility patterns, responsive breakpoints, and configuration tips. It provides ready-to-use class combinations for layout, cards, buttons, forms, dark mode, and state modifiers to speed up development. Use it as a compact cheat sheet when building UI with Tailwind.

How this skill works

It lists common responsive prefixes and their min-width breakpoints, plus practical utility patterns for containers, flex/grid layouts, spacing, and component shells like cards and buttons. It also shows dark mode configuration, state modifiers, spacing scale examples, and how to use arbitrary values. Combine the patterns directly in your HTML or adapt them into components and Tailwind config.

When to use it

When you need a quick, copy-pasteable set of utility class patterns for common UI components.
While scaffolding responsive layouts that must behave across small, medium, and large breakpoints.
When implementing dark mode and wanting the minimal class and config setup.
When teaching or documenting Tailwind usage for a team or onboarding new developers.
When you need examples of state modifiers (hover, focus, active) and spacing scale mappings.

Best practices

Use responsive prefixes (sm:, md:, lg:, xl:, 2xl:) to adapt utilities across breakpoints rather than duplicating markup.
Keep components composable: start with a base container (container mx-auto px-4) and layer utilities for spacing and layout.
Prefer semantic grouping (flex flex-col gap-4) for vertical stacks and grid classes for multi-column layouts.
Enable dark mode via the Tailwind config (darkMode: 'class') and apply paired classes (bg-white dark:bg-gray-900).
Use arbitrary values sparingly for one-off sizing (w-[137px]) and prefer theme tokens when possible for consistency.

Example use cases

Create a responsive card grid: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 with each card using bg-white rounded-lg shadow-md p-6.
Build a primary action button with hover state: bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors.
Style accessible form inputs with focus visuals: w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500.
Implement site-wide dark mode by adding dark classes alongside light classes and enabling darkMode: 'class' in tailwind.config.js.
Use state modifiers and group-hover to reveal interactions: group-hover:opacity-100 or hover:transform hover:scale-105.

FAQ

What are the default responsive breakpoints in Tailwind?

sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px.

How do I enable dark mode in Tailwind?

Set darkMode: 'class' in tailwind.config.js and add paired classes like bg-white dark:bg-gray-900 on elements.