Backgrounds & Borders Cheatsheet
Backgrounds
| Goal | Classes |
|---|
| Solid color | bg-sky-500 |
| Opacity | bg-sky-500/50 |
| Image | bg-[url('/hero.png')] |
| Cover / contain | bg-cover, bg-contain |
| Centered | bg-center |
| Linear gradient | bg-linear-to-r from-sky-500 via-white to-indigo-500 |
| Radial gradient | bg-radial from-sky-500 to-indigo-500 |
| No repeat | bg-no-repeat |
Borders
| Goal | Classes |
|---|
| 1px border | border |
| 2px border | border-2 |
| Top border only | border-t-2 |
| Color | border-gray-300 |
| Dashed | border-dashed |
Radius
| Goal | Classes |
|---|
| Small | rounded-sm |
| Default | rounded |
| Large | rounded-lg / rounded-xl |
| Circle | rounded-full |
| Top only | rounded-t-lg |
| Top-left only | rounded-tl-lg |
Focus & accents
| Goal | Classes |
|---|
| Focus ring | focus:ring-2 focus:ring-sky-500 |
| Ring offset | ring-offset-2 |
| Outline with offset | outline-2 outline-offset-2 |
| No outline | outline-none |
| Dividers | divide-y divide-gray-200 |
Common card recipe
<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-md">
...
</div>
TL;DR
bg-linear-to-r from- to- for gradients.ring- is a box-shadow; border- takes space.divide-y borders between children.rounded-full for pills/circles.