← Back to Tools
Tailwind CSS Generator
Build Tailwind classes visually with live preview
Property Editor
Reset
Layout
Typography
Appearance
Effects
Display
--select--
flex
grid
block
inline-block
inline
hidden
Position
--select--
static
relative
absolute
fixed
sticky
Width
Height
Padding (px)
Margin (px)
Flex Direction
--select--
row
column
row-reverse
column-reverse
Justify Content
--select--
start
center
end
between
around
evenly
Align Items
--select--
start
center
end
baseline
stretch
Font Size
--select--
xs (12px)
sm (14px)
base (16px)
lg (18px)
xl (20px)
2xl (24px)
3xl (30px)
4xl (36px)
Font Weight
--select--
100 (Thin)
300 (Light)
400 (Normal)
500 (Medium)
600 (Semibold)
700 (Bold)
900 (Black)
Text Color
--select--
white
black
gray-600
gray-400
red-500
blue-500
green-500
purple-500
Text Align
--select--
left
center
right
justify
Line Height
--select--
3
4
5
6
7
8
9
10
Letter Spacing
--select--
tighter
tight
normal
wide
wider
widest
Background Color
--select--
white
gray-900
gray-800
gray-100
red-500
blue-500
green-500
purple-500
indigo-600
Background Opacity
--select--
10%
25%
50%
75%
90%
Border Width
--select--
0
1px
2px
4px
8px
Border Color
--select--
gray-200
gray-300
gray-500
red-500
blue-500
green-500
purple-500
Border Radius
--select--
0
sm (2px)
base (4px)
md (6px)
lg (8px)
xl (12px)
2xl (16px)
full (circle)
Ring (Outline)
--select--
1px
2px
4px
8px
Shadow
--select--
sm
base
md
lg
xl
2xl
Opacity
--select--
0%
25%
50%
75%
100%
Blur
--select--
sm (4px)
base (8px)
md (12px)
lg (16px)
xl (20px)
Brightness
--select--
50%
75%
90%
100%
110%
125%
150%
Transition Duration
--select--
75ms
100ms
150ms
200ms
300ms
500ms
Timing Function
--select--
linear
ease
ease-in
ease-out
ease-in-out
Variants & Prefixes
dark:
hover:
focus:
Responsive Prefixes
Base
sm:
md:
lg:
xl:
2xl:
Component Templates
Primary Button
Secondary Button
Outline Button
Basic Card
Image Card
Badge/Tag
Input Field
Alert Banner
Avatar
Navbar
Live Preview
Hello World
Generated Class
Copy
--
Equivalent CSS
Copy
/* CSS will appear here */
Color Palette
Search Classes
\xF0\x9F\x92\x99 Tip
\xF0\x9F\x93\x9A Get Bundle \x244.99