Docs Components Blog Showcase

Documentation
Components
Templates
Playground
Community

Getting started

Installation
Editor setup
Compatibility
Upgrade guide

Core concepts

Styling with utility classes
Hover, focus, and other states
Responsive design
Dark mode
Theme variables
Colors
Adding custom styles
Detecting classes in source files
Functions and directives

Base styles

Preflight

Layout

aspect-ratio
columns
break-after
break-before
break-inside
box-decoration-break
box-sizing
display
float
clear
isolation
object-fit
object-position
overflow
overscroll-behavior
position
top / right / bottom / left
visibility
z-index

Flexbox & Grid

flex-basis
flex-direction
flex-wrap
flex
flex-grow
flex-shrink
order
grid-template-columns
grid-column
grid-template-rows
grid-row
grid-auto-flow
grid-auto-columns
grid-auto-rows
gap
justify-content
justify-items
justify-self
align-content
align-items
align-self
place-content
place-items
place-self

Spacing

padding
margin

Sizing

width
min-width
max-width
height
min-height
max-height

Typography

font-family
font-size
font-smoothing
font-style
font-weight
font-stretch
font-variant-numeric
letter-spacing
line-clamp
line-height
list-style-image
list-style-position
list-style-type
text-align
color
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-underline-offset
text-transform
text-overflow
text-wrap
text-indent
vertical-align
white-space
word-break
hyphens
content

Backgrounds

background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size

Borders

border-radius
border-width
border-color
border-style
outline-width
outline-color
outline-style
outline-offset

Effects

box-shadow
opacity
mix-blend-mode
background-blend-mode

Filters

filter
backdrop-filter

Tables

border-collapse
border-spacing
table-layout
caption-side

Transitions & Animation

transition-property
transition-behavior
transition-duration
transition-timing-function
transition-delay
animation

Transforms

backface-visibility
perspective
perspective-origin
rotate
scale
skew
transform
transform-origin
transform-style
translate

Interactivity

accent-color
appearance
caret-color
color-scheme
cursor
field-sizing
pointer-events
resize
scroll-behavior
scroll-margin
scroll-padding
scroll-snap-align
scroll-snap-stop
scroll-snap-type
touch-action
user-select
will-change

SVG

fill
stroke
stroke-width

Accessibility

forced-color-adjust

Spacing scale

Something about the spacing scale.

Spacing scale

Aliquid ad qui id pariatur.

Using spacing utilities

Using negative values

Customizing the scale

Referencing in CSS

Container scale

What is it for?

Using container utilities

Using container queries

Customizing the scale

Referencing in CSS

On this page

Spacing scale
Container scale

Refactoring UI

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

“This is the survival kit I wish I had when I started building apps.”
Derrick Reimer, SavvyCal

Learn

Documentation
Showcase
Blog
Playground

Resources

Refactoring UI
Headless UI
Heroicons
Hero Patterns

Tailwind UI

UI Blocks
Templates
UI Kit

Community

GitHub
Discord
X

Learn

Documentation
Showcase
Blog
Playground

Tailwind UI

UI Blocks
Templates
UI Kit

Resources

Refactoring UI
Headless UI
Heroicons
Hero Patterns

Community

GitHub
Discord
X

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy