TailwindLab (Tailwind CSS Builder) by TeknoMaven
Build Tailwind classes visually with live preview
Builder
Templates
Code:
HTML
Clear
Copy
Select classes from categories...
Element Type:
📦
div
🔘
button
📝
input
📄
textarea
🎴
card
📰
text
📌
heading
🖼️
image
🏷️
badge
⚠️
alert
📋
list
🔗
link
🧭
nav
📋
form
📊
table
Preview Mode:
Preview Text
💡 Quick Tips:
• Click classes to add/remove
• Conflicting classes auto-replace
• Use templates for quick start
Layout
Display
block
inline-block
inline
flex
inline-flex
grid
inline-grid
hidden
Position
static
fixed
absolute
relative
sticky
Overflow
overflow-auto
overflow-hidden
overflow-visible
overflow-scroll
Z-Index
z-0
z-10
z-20
z-30
z-40
z-50
Flexbox
Flex Direction
flex-row
flex-row-reverse
flex-col
flex-col-reverse
Justify Content
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
Align Items
items-start
items-end
items-center
items-baseline
items-stretch
Gap
gap-0
gap-1
gap-2
gap-4
gap-6
gap-8
Spacing
Padding
p-0
p-1
p-2
p-4
p-6
p-8
p-12
px-4
py-4
pt-4
pb-4
pl-4
pr-4
Margin
m-0
m-1
m-2
m-4
m-6
m-8
m-12
mx-4
my-4
mt-4
mb-4
ml-4
mr-4
Sizing
Width
w-auto
w-full
w-1/2
w-1/3
w-2/3
w-1/4
w-3/4
w-screen
Height
h-auto
h-full
h-screen
h-16
h-32
h-64
Min/Max Width
min-w-0
min-w-full
max-w-xs
max-w-sm
max-w-md
max-w-lg
max-w-xl
max-w-full
Typography
Font Size
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
Font Weight
font-thin
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
Text Align
text-left
text-center
text-right
text-justify
Text Color
text-white
text-black
text-gray-500
text-gray-700
text-blue-500
text-green-500
text-red-500
Backgrounds
BG Color
bg-white
bg-black
bg-gray-100
bg-gray-200
bg-gray-800
bg-blue-500
bg-green-500
bg-red-500
BG Opacity
bg-opacity-0
bg-opacity-25
bg-opacity-50
bg-opacity-75
bg-opacity-100
Gradient
bg-gradient-to-r
bg-gradient-to-l
bg-gradient-to-t
bg-gradient-to-b
from-blue-500
via-purple-500
to-pink-500
Borders
Border Width
border
border-0
border-2
border-4
border-8
Border Color
border-gray-300
border-gray-500
border-blue-500
border-green-500
border-red-500
Border Radius
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-full
Effects
Box Shadow
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Opacity
opacity-0
opacity-25
opacity-50
opacity-75
opacity-100
Transition
transition
transition-all
duration-150
duration-300
duration-500
Hover Effects
hover:bg-gray-100
hover:scale-105
hover:shadow-lg