Tailwind Class Generator
Generate Tailwind CSS classes visually
Preview Text
Spacing (Padding/Margin)
Padding
Margin
All
Top
Right
Bottom
Left
Horizontal
Vertical
0
1 (0.25rem)
2 (0.5rem)
3 (0.75rem)
4 (1rem)
6 (1.5rem)
8 (2rem)
12 (3rem)
16 (4rem)
Colors
Background
bg-red-500
bg-blue-500
bg-green-500
bg-yellow-500
bg-purple-500
bg-gray-500
bg-white
bg-black
Text Color
text-white
text-black
text-gray-800
Typography
Text Size
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
Font Weight
font-light
font-normal
font-medium
font-bold
Border Radius
None
rounded
rounded-md
rounded-lg
rounded-xl
rounded-full
Flexbox
Display
block
inline-block
flex
inline-flex
Justify
justify-start
justify-center
justify-end
justify-between
Align
items-start
items-center
items-end
Generate Classes
Copy