Tailwind Class Lookup

Quickly search and find the right Tailwind CSS utility classes.

Search Classes
51 results

Layout

aspect-auto

aspect-ratio: auto;

container

max-width: 100%;

columns-1

columns: 1;

break-after-auto

break-after: auto;

box-border

box-sizing: border-box;

block

display: block;

inline-block

display: inline-block;

flex

display: flex;

grid

display: grid;

hidden

display: none;

float-right

float: right;

clear-both

clear: both;

object-contain

object-fit: contain;

overflow-hidden

overflow: hidden;

position-relative

position: relative;

top-0

top: 0px;

z-50

z-index: 50;

Flexbox & Grid

flex-row

flex-direction: row;

flex-wrap

flex-wrap: wrap;

flex-1

flex: 1 1 0%;

grow

flex-grow: 1;

shrink

flex-shrink: 1;

order-first

order: -9999;

grid-cols-12

grid-template-columns: repeat(12, minmax(0, 1fr));

gap-4

gap: 1rem;

justify-center

justify-content: center;

items-center

align-items: center;

self-auto

align-self: auto;

Spacing

p-4

padding: 1rem;

px-6

padding-left: 1.5rem; padding-right: 1.5rem;

m-0

margin: 0px;

mx-auto

margin-left: auto; margin-right: auto;

space-x-4

margin-left: 1rem (children);

Sizing

w-full

width: 100%;

w-screen

width: 100vw;

h-10

height: 2.5rem;

max-w-7xl

max-width: 80rem;

min-h-screen

min-height: 100vh;

Typography

font-sans

font-family: ui-sans-serif, ...

text-sm

font-size: 0.875rem;

font-bold

font-weight: 700;

tracking-tight

letter-spacing: -0.025em;

leading-relaxed

line-height: 1.625;

text-center

text-align: center;

text-primary

color: var(--primary);

underline

text-decoration: underline;

uppercase

text-transform: uppercase;

Backgrounds

bg-white

background-color: #ffffff;

bg-gradient-to-r

background-image: linear-gradient(to right, ...);

bg-cover

background-size: cover;

bg-no-repeat

background-repeat: no-repeat;

Info

Tailwind CSS uses utility classes to build custom designs directly in your markup.

Click any card to instantly copy the class name to your clipboard.

Use the search bar to find classes by name or CSS property.

About this Tool

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. It allows developers to build custom designs without ever leaving their HTML.

Frequently Asked Questions

Previous
Color Format ConverterDesign & Style
Next
CSS Specificity CalculatorDesign & Style