Tailwind CSSUtility API

Build anything from landing pages to dashboards

Tailwind's utility first approach gives you the tools to build your designs without leaving your HTML

Class	Applies...
text-blue-500
	font-bold text-sm sets font-weight: bold
text-md sm:text-lg	`font-size: 1rem; @media (min-width: 640px) { font-size: 1.25rem; }`

Use utilities like text-center max-w-xl

HTML preview

HTML

1. Core Utility Classes

Text

font-family
font-size
font-weight
line-height
text-align
leading


              text-lg font-semibold mt-2 px-2">
              font-size: 3rem;

Spacing Classes

margin margin utility classes use px/pt/pb/m/mt/m-2

padding (p-4)

margin-top mt-2 margin-top: 0.5rem

Use mx-auto for horizontal centering

                    p-4 py-8 md:py-12 text-center mx-auto max-w-lg">

Pagination max hover:-translate-y-1 transition-all duration-200 hover:scale-105 shadow-2xl

Transform

Layout
Layout utilities

flex justify-center max-w-md rounded-lg bg-blue-500 p-2">

border-l-4 border-red-200
box-border

grid
class="grid gap-4
rows-6
class="grid-cols-2"
col-span-3
class="w-80 h-auto md:grid"

spacing

text

layout

utilities

hover

transition

hover:bg-blue-600

Tailwind API


            class="hover:


            max-w-8 w-full text-2xl bg-purple-50 p-5 rounded text-center md:block transform hover:-translate-y-2 transition-transform duration-200 shadow