tailwind-patterns_skill

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.