5 Tailwind CSS Patterns I Use in Every Project

Tailwind is the kind of tool that feels weird until it doesn't. Once it clicks, you start noticing patterns — small combinations of utilities that solve the same problem over and over.

Here are the five I reach for most.

1. The card

rounded-2xl border border-gray-200 bg-white p-6 shadow-sm

2. The container

mx-auto max-w-7xl px-4 sm:px-6 lg:px-8

3. The stack

Use space-y-* on a flex column for vertical rhythm.

4. The grid

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 — the responsive workhorse.

5. The hover lift

transition-transform hover:-translate-y-1 — adds delight on cards.