Style with Utility
Building a Card with Utility Classes
One utility at a time. Utility Class Docs.
RESULT
Tailwind Card
Utilities compose one step at a time.
NEW CLASSES
w-full max-w-sm
Built-in Colors
Using Tailwind's default color palette. Tailwind Color Docs.
100
200
300
400
500
600
700
800
900
slate
100
200
300
400
500
600
700
800
900
teal
100
200
300
400
500
600
700
800
900
pink
Class Format
bg-slate-500 text-white border-teal-700
Flex vs. Grid
Same children, different layout model.
FLEX
1
2
3
flex flex-row gap-4
GRID
1
2
3
grid grid-cols-3 gap-4