Get started
HomeDesign & WebTailwind Classes
Design & WebRuns in your browser · files never uploaded

Find the Right Tailwind Class

Find the right utility class

4.7· 49 votes
Your file never leaves this browser. Everything runs on your device — no uploads, no server storage, no retention.How it works →
344 / 344
Classes
p-0
padding: 0px
px-0
padding-inline: 0px
py-0
padding-block: 0px
m-0
margin: 0px
mx-0
margin-inline: 0px
my-0
margin-block: 0px
gap-0
gap: 0px
w-0
width: 0px
h-0
height: 0px
p-px
padding: 1px
px-px
padding-inline: 1px
py-px
padding-block: 1px
m-px
margin: 1px
mx-px
margin-inline: 1px
my-px
margin-block: 1px
gap-px
gap: 1px
w-px
width: 1px
h-px
height: 1px
p-0.5
padding: 2px
px-0.5
padding-inline: 2px
py-0.5
padding-block: 2px
m-0.5
margin: 2px
mx-0.5
margin-inline: 2px
my-0.5
margin-block: 2px
gap-0.5
gap: 2px
w-0.5
width: 2px
h-0.5
height: 2px
p-1
padding: 4px
px-1
padding-inline: 4px
py-1
padding-block: 4px
m-1
margin: 4px
mx-1
margin-inline: 4px
my-1
margin-block: 4px
gap-1
gap: 4px
w-1
width: 4px
h-1
height: 4px
p-1.5
padding: 6px
px-1.5
padding-inline: 6px
py-1.5
padding-block: 6px
m-1.5
margin: 6px
mx-1.5
margin-inline: 6px
my-1.5
margin-block: 6px
gap-1.5
gap: 6px
w-1.5
width: 6px
h-1.5
height: 6px
p-2
padding: 8px
px-2
padding-inline: 8px
py-2
padding-block: 8px
m-2
margin: 8px
mx-2
margin-inline: 8px
my-2
margin-block: 8px
gap-2
gap: 8px
w-2
width: 8px
h-2
height: 8px
p-2.5
padding: 10px
px-2.5
padding-inline: 10px
py-2.5
padding-block: 10px
m-2.5
margin: 10px
mx-2.5
margin-inline: 10px
my-2.5
margin-block: 10px
gap-2.5
gap: 10px
w-2.5
width: 10px
h-2.5
height: 10px
p-3
padding: 12px
px-3
padding-inline: 12px
py-3
padding-block: 12px
m-3
margin: 12px
mx-3
margin-inline: 12px
my-3
margin-block: 12px
gap-3
gap: 12px
w-3
width: 12px
h-3
height: 12px
p-3.5
padding: 14px
px-3.5
padding-inline: 14px
py-3.5
padding-block: 14px
m-3.5
margin: 14px
mx-3.5
margin-inline: 14px
my-3.5
margin-block: 14px
gap-3.5
gap: 14px
w-3.5
width: 14px
h-3.5
height: 14px
p-4
padding: 16px
px-4
padding-inline: 16px
py-4
padding-block: 16px
m-4
margin: 16px
mx-4
margin-inline: 16px
my-4
margin-block: 16px
gap-4
gap: 16px
w-4
width: 16px
h-4
height: 16px
p-5
padding: 20px
px-5
padding-inline: 20px
py-5
padding-block: 20px
m-5
margin: 20px
mx-5
margin-inline: 20px
my-5
margin-block: 20px
gap-5
gap: 20px
w-5
width: 20px
h-5
height: 20px
p-6
padding: 24px
px-6
padding-inline: 24px
py-6
padding-block: 24px
m-6
margin: 24px
mx-6
margin-inline: 24px
my-6
margin-block: 24px
gap-6
gap: 24px
w-6
width: 24px
h-6
height: 24px
p-7
padding: 28px
px-7
padding-inline: 28px
py-7
padding-block: 28px
m-7
margin: 28px
mx-7
margin-inline: 28px
my-7
margin-block: 28px
gap-7
gap: 28px
w-7
width: 28px
h-7
height: 28px
p-8
padding: 32px
px-8
padding-inline: 32px
py-8
padding-block: 32px
m-8
margin: 32px
mx-8
margin-inline: 32px
my-8
margin-block: 32px
gap-8
gap: 32px
w-8
width: 32px
h-8
height: 32px
p-9
padding: 36px
px-9
padding-inline: 36px
py-9
padding-block: 36px
m-9
margin: 36px
mx-9
margin-inline: 36px
my-9
margin-block: 36px
gap-9
gap: 36px
w-9
width: 36px
h-9
height: 36px
p-10
padding: 40px
px-10
padding-inline: 40px
py-10
padding-block: 40px
m-10
margin: 40px
mx-10
margin-inline: 40px
my-10
margin-block: 40px
gap-10
gap: 40px
w-10
width: 40px
h-10
height: 40px
p-12
padding: 48px
px-12
padding-inline: 48px
py-12
padding-block: 48px
m-12
margin: 48px
mx-12
margin-inline: 48px
my-12
margin-block: 48px
gap-12
gap: 48px
w-12
width: 48px
h-12
height: 48px
p-14
padding: 56px
px-14
padding-inline: 56px
py-14
padding-block: 56px
m-14
margin: 56px
mx-14
margin-inline: 56px
my-14
margin-block: 56px
gap-14
gap: 56px
w-14
width: 56px
h-14
height: 56px
p-16
padding: 64px
px-16
padding-inline: 64px
py-16
padding-block: 64px
m-16
margin: 64px
mx-16
margin-inline: 64px
my-16
margin-block: 64px
gap-16
gap: 64px
w-16
width: 64px
h-16
height: 64px
p-20
padding: 80px
px-20
padding-inline: 80px
py-20
padding-block: 80px
m-20
margin: 80px
mx-20
margin-inline: 80px
my-20
margin-block: 80px
gap-20
gap: 80px
w-20
width: 80px
h-20
height: 80px
p-24
padding: 96px
px-24
padding-inline: 96px
py-24
padding-block: 96px
m-24
margin: 96px
mx-24
margin-inline: 96px
my-24
margin-block: 96px
gap-24
gap: 96px
w-24
width: 96px
h-24
height: 96px
p-32
padding: 128px
px-32
padding-inline: 128px
py-32
padding-block: 128px
m-32
margin: 128px
mx-32
margin-inline: 128px
my-32
margin-block: 128px
gap-32
gap: 128px
w-32
width: 128px
h-32
height: 128px
p-40
padding: 160px
px-40
padding-inline: 160px
py-40
padding-block: 160px
m-40
margin: 160px
mx-40
margin-inline: 160px
my-40
margin-block: 160px
gap-40
gap: 160px
w-40
width: 160px
h-40
height: 160px
p-48
padding: 192px
px-48
padding-inline: 192px
py-48
padding-block: 192px
m-48
margin: 192px
mx-48
margin-inline: 192px
my-48
margin-block: 192px
gap-48
gap: 192px
w-48
width: 192px
h-48
height: 192px
p-64
padding: 256px
px-64
padding-inline: 256px
py-64
padding-block: 256px
m-64
margin: 256px
mx-64
margin-inline: 256px
my-64
margin-block: 256px
gap-64
gap: 256px
w-64
width: 256px
h-64
height: 256px
w-full
width: 100%
w-screen
width: 100vw
w-auto
width: auto
w-fit
width: fit-content
w-min
width: min-content
w-max
width: max-content
h-full
height: 100%
h-screen
height: 100vh
h-auto
height: auto
flex
display: flex
inline-flex
display: inline-flex
flex-row
flex-direction: row
flex-col
flex-direction: column
flex-wrap
flex-wrap: wrap
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
items-stretch
align-items: stretch
items-baseline
align-items: baseline
justify-start
justify-content: flex-start
justify-center
justify-content: center
justify-end
justify-content: flex-end
justify-between
justify-content: space-between
justify-around
justify-content: space-around
justify-evenly
justify-content: space-evenly
grid
display: grid
inline-grid
display: inline-grid
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr))
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr))
col-span-2
grid-column: span 2 / span 2
col-span-full
grid-column: 1 / -1
text-xs
font-size: 12px
text-sm
font-size: 14px
text-base
font-size: 16px
text-lg
font-size: 18px
text-xl
font-size: 20px
text-2xl
font-size: 24px
text-3xl
font-size: 30px
text-4xl
font-size: 36px
font-thin
font-weight: 100
font-light
font-weight: 300
font-normal
font-weight: 400
font-medium
font-weight: 500
font-semibold
font-weight: 600
font-bold
font-weight: 700
font-extrabold
font-weight: 800
italic
font-style: italic
uppercase
text-transform: uppercase
lowercase
text-transform: lowercase
capitalize
text-transform: capitalize
leading-none
line-height: 1
leading-tight
line-height: 1.25
leading-normal
line-height: 1.5
leading-relaxed
line-height: 1.625
tracking-tight
letter-spacing: -0.025em
tracking-normal
letter-spacing: 0em
tracking-wide
letter-spacing: 0.025em
text-left
text-align: left
text-center
text-align: center
text-right
text-align: right
truncate
overflow/text-overflow/white-space: hidden/ellipsis/nowrap
rounded
border-radius: 4px
rounded-md
border-radius: 6px
rounded-lg
border-radius: 8px
rounded-xl
border-radius: 12px
rounded-2xl
border-radius: 16px
rounded-3xl
border-radius: 24px
rounded-full
border-radius: 9999px
rounded-none
border-radius: 0
border
border-width: 1px
border-0
border-width: 0
border-2
border-width: 2px
border-4
border-width: 4px
border-dashed
border-style: dashed
border-dotted
border-style: dotted
border-solid
border-style: solid
shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)
shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow-none
box-shadow: none
opacity-0
opacity: 0
opacity-25
opacity: 0.25
opacity-50
opacity: 0.5
opacity-75
opacity: 0.75
opacity-100
opacity: 1
static
position: static
relative
position: relative
absolute
position: absolute
fixed
position: fixed
sticky
position: sticky
inset-0
inset: 0
top-0
top: 0
right-0
right: 0
bottom-0
bottom: 0
left-0
left: 0
z-0
z-index: 0
z-10
z-index: 10
z-20
z-index: 20
z-50
z-index: 50
block
display: block
inline-block
display: inline-block
inline
display: inline
hidden
display: none
table
display: table
overflow-auto
overflow: auto
overflow-hidden
overflow: hidden
overflow-scroll
overflow: scroll
overflow-visible
overflow: visible
cursor-pointer
cursor: pointer
cursor-default
cursor: default
cursor-not-allowed
cursor: not-allowed
cursor-wait
cursor: wait
cursor-text
cursor: text
Curated subset — covers the ~70% of Tailwind utilities people search for. The full reference lives at tailwindcss.com/docs.

What is Tailwind Class Finder?

Search a curated subset of the Tailwind CSS class catalog by name, CSS property, or value. Covers spacing, flex, grid, typography, borders, effects, position, display, overflow, and cursor. Useful when you remember what you want the CSS to do but not which Tailwind class does it.

How do I use Tailwind Class Finder?

  1. Type a keyword in the search box (e.g. "padding" or "shadow").
  2. Filter by group tag if the result is too broad.
  3. Copy the class name.

When should I use Tailwind Class Finder?

Tailwind Classes is a searchable cheat-sheet. For the full reference (including arbitrary values and responsive modifiers), the official Tailwind docs are the source of truth.

Frequently asked questions

What does this tool do?

Takes an arbitrary list of Tailwind classes and sorts, deduplicates, and groups them the way Tailwind's official sorter does; matching the canonical order Prettier's Tailwind plugin produces.

Does it work with Tailwind v3 and v4?

Yes. Pick the version in the dropdown; sorting differs slightly between releases (v4 introduced new utility groups).

Can I paste a whole HTML file?

Yes. Any className="..." attributes in the input are detected and reformatted in place, leaving the rest of the HTML untouched.

Is my file uploaded anywhere?

No. Everything runs in your browser. Your files never leave your device, and there is no server component for this tool.

Tools that pair well with Tailwind Class Finder

More design & web

Color Picker
HEX ↔ RGB
Gradient Generator
Box Shadow
Border Radius
Clip Path