📖 Guide

Tailwind CSS Reference

Complete Tailwind CSS reference — layout, spacing, typography, colors, responsive design, states, and common patterns.

208 commands across 13 categories

Layout Flexbox Grid Spacing Sizing Typography Colors & Backgrounds Borders & Rounded Effects Responsive Design States Transitions & Animation Common Patterns

Layout

Command	Description
`block`	display: block
`inline-block`	display: inline-block
`inline`	display: inline
`flex`	display: flex
`inline-flex`	display: inline-flex
`grid`	display: grid
`inline-grid`	display: inline-grid
`hidden`	display: none
`static`	position: static
`relative`	position: relative
`absolute`	position: absolute
`fixed`	position: fixed
`sticky`	position: sticky
`top-0 right-0 bottom-0 left-0`	Position offsets — set to 0
`inset-0`	top/right/bottom/left all 0 (shorthand)
`inset-x-0`	left: 0; right: 0
`inset-y-0`	top: 0; bottom: 0
`z-10 / z-20 / z-30 / z-40 / z-50`	z-index values
`z-auto`	z-index: auto
`overflow-hidden`	overflow: hidden
`overflow-auto`	overflow: auto
`overflow-scroll`	overflow: scroll
`overflow-x-auto`	overflow-x: auto (horizontal scrolling)
`container`	Responsive container — max-width at each breakpoint
`mx-auto`	Center a block element horizontally

Flexbox

Command	Description
`flex-row`	flex-direction: row (default)
`flex-col`	flex-direction: column
`flex-row-reverse`	flex-direction: row-reverse
`flex-col-reverse`	flex-direction: column-reverse
`flex-wrap`	flex-wrap: wrap
`flex-nowrap`	flex-wrap: nowrap
`flex-1`	flex: 1 1 0% — grow and shrink, ignore initial size
`flex-auto`	flex: 1 1 auto — grow and shrink, consider initial size
`flex-initial`	flex: 0 1 auto — shrink but don't grow
`flex-none`	flex: none — don't grow or shrink
`grow`	flex-grow: 1
`grow-0`	flex-grow: 0
`shrink`	flex-shrink: 1
`shrink-0`	flex-shrink: 0
`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
`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
`self-auto / self-start / self-center / self-end / self-stretch`	align-self utilities

Grid

Command	Description
`grid-cols-1 / grid-cols-2 / ... / grid-cols-12`	grid-template-columns with N equal columns
`grid-cols-none`	grid-template-columns: none
`grid-rows-1 / grid-rows-2 / ... / grid-rows-6`	grid-template-rows with N equal rows
`col-span-1 / col-span-2 / ... / col-span-12`	Span N columns
`col-span-full`	grid-column: 1 / -1 (span all columns)
`col-start-1 / col-end-3`	Grid column start and end lines
`row-span-1 / row-span-2 / ... / row-span-6`	Span N rows
`row-span-full`	grid-row: 1 / -1 (span all rows)
`auto-cols-auto / auto-cols-fr / auto-cols-min / auto-cols-max`	grid-auto-columns utilities
`grid-flow-row / grid-flow-col / grid-flow-dense`	grid-auto-flow utilities

Spacing

Command	Description
`p-0 / p-1 / p-2 / p-4 / p-6 / p-8`	Padding all sides (0=0, 1=0.25rem, 2=0.5rem, 4=1rem, etc.)
`px-4`	Horizontal padding (left + right)
`py-4`	Vertical padding (top + bottom)
`pt-4 / pr-4 / pb-4 / pl-4`	Padding for individual sides
`m-0 / m-1 / m-2 / m-4 / m-6 / m-8`	Margin all sides
`mx-4`	Horizontal margin (left + right)
`my-4`	Vertical margin (top + bottom)
`mt-4 / mr-4 / mb-4 / ml-4`	Margin for individual sides
`m-auto`	margin: auto
`-mt-4`	Negative margin (top): -1rem
`space-x-4`	Horizontal space between children (uses margin)
`space-y-4`	Vertical space between children
`gap-4`	Gap between flex/grid children (1rem)
`gap-x-4 / gap-y-4`	Column gap / row gap separately
`p-[13px]` e.g. padding: 13px	Arbitrary padding value

Sizing

Command	Description
`w-0 / w-1 / w-4 / w-8 / w-16 / w-32 / w-64`	Fixed widths (0=0, 4=1rem, 16=4rem, etc.)
`w-full`	width: 100%
`w-screen`	width: 100vw
`w-auto`	width: auto
`w-1/2 / w-1/3 / w-2/3 / w-1/4 / w-3/4`	Fractional widths
`w-fit`	width: fit-content
`w-min`	width: min-content
`w-max`	width: max-content
`min-w-0 / min-w-full`	min-width utilities
`max-w-sm / max-w-md / max-w-lg / max-w-xl / max-w-2xl`	max-width: 24rem / 28rem / 32rem / 36rem / 42rem
`max-w-screen-sm / max-w-screen-md / max-w-screen-lg`	max-width matching breakpoints
`max-w-prose`	max-width: 65ch (ideal reading width)
`max-w-none`	max-width: none
`h-0 / h-4 / h-8 / h-16 / h-32 / h-64`	Fixed heights
`h-full`	height: 100%
`h-screen`	height: 100vh
`h-dvh`	height: 100dvh (dynamic viewport height — mobile friendly)
`min-h-0 / min-h-full / min-h-screen`	min-height utilities
`max-h-screen / max-h-full`	max-height utilities
`size-4 / size-8 / size-16`	Set width and height simultaneously
`aspect-square`	aspect-ratio: 1 / 1
`aspect-video`	aspect-ratio: 16 / 9

Typography

Command	Description
`text-xs / text-sm / text-base / text-lg / text-xl / text-2xl / text-3xl`	Font sizes (0.75rem to 1.875rem)
`text-4xl / text-5xl / text-6xl / text-7xl / text-8xl / text-9xl`	Large font sizes (2.25rem to 8rem)
`font-thin / font-light / font-normal / font-medium`	Font weights: 100, 300, 400, 500
`font-semibold / font-bold / font-extrabold / font-black`	Font weights: 600, 700, 800, 900
`font-sans / font-serif / font-mono`	Font family
`italic / not-italic`	Font style
`leading-none / leading-tight / leading-normal / leading-relaxed / leading-loose`	Line height (1, 1.25, 1.5, 1.625, 2)
`tracking-tighter / tracking-tight / tracking-normal / tracking-wide / tracking-wider / tracking-widest`	Letter spacing
`text-left / text-center / text-right / text-justify`	Text alignment
`underline / line-through / no-underline`	Text decoration
`uppercase / lowercase / capitalize / normal-case`	Text transform
`truncate`	Truncate with ellipsis (overflow: hidden, text-overflow: ellipsis, white-space: nowrap)
`line-clamp-1 / line-clamp-2 / line-clamp-3`	Limit text to N lines with ellipsis
`whitespace-nowrap / whitespace-pre / whitespace-pre-wrap`	White space handling
`break-words / break-all`	Word breaking behavior

Colors & Backgrounds

Command	Description
`text-black / text-white`	Text color: black or white
`text-gray-500 / text-gray-700 / text-gray-900`	Text color with shade (50–950)
`text-blue-500 / text-red-500 / text-green-500`	Text color with color name
`text-transparent`	color: transparent
`text-inherit`	color: inherit
`bg-white / bg-black / bg-transparent`	Background color
`bg-gray-100 / bg-blue-500 / bg-red-50`	Background color with shade
`bg-gradient-to-r from-blue-500 to-purple-500`	Linear gradient left to right
`bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500`	Gradient with via (middle) color
`bg-[#1da1f2]`	Arbitrary background color value
`text-blue-500/50`	Text color with 50% opacity
`bg-black/75`	Background with 75% opacity

Borders & Rounded

Command	Description
`border`	border-width: 1px
`border-2 / border-4 / border-8`	border-width: 2px / 4px / 8px
`border-0`	border-width: 0
`border-t / border-r / border-b / border-l`	Border on individual sides
`border-gray-200 / border-blue-500`	Border color
`border-solid / border-dashed / border-dotted / border-none`	Border style
`rounded`	border-radius: 0.25rem
`rounded-md`	border-radius: 0.375rem
`rounded-lg`	border-radius: 0.5rem
`rounded-xl / rounded-2xl / rounded-3xl`	Larger border radius values
`rounded-full`	border-radius: 9999px (circle/pill)
`rounded-none`	border-radius: 0
`rounded-t-lg / rounded-b-lg`	Rounded top / bottom only
`rounded-tl-lg / rounded-br-lg`	Rounded individual corners
`divide-y / divide-x`	Add borders between children (horizontal/vertical)
`divide-gray-200`	Set divider color
`ring-2 ring-blue-500`	Box shadow ring (outline without affecting layout)
`ring-offset-2`	Add space between ring and element

Effects

Command	Description
`shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl`	Box shadow sizes
`shadow-none`	Remove box shadow
`shadow-inner`	Inset box shadow
`opacity-0 / opacity-25 / opacity-50 / opacity-75 / opacity-100`	Element opacity
`mix-blend-multiply / mix-blend-screen / mix-blend-overlay`	Mix blend modes
`blur-sm / blur / blur-md / blur-lg / blur-xl`	Blur filter
`brightness-50 / brightness-100 / brightness-150`	Brightness filter
`grayscale / grayscale-0`	Grayscale filter
`backdrop-blur-sm / backdrop-blur-md`	Backdrop blur (for glass effects)
`cursor-pointer / cursor-not-allowed / cursor-wait`	Cursor style
`select-none / select-text / select-all`	User text selection behavior
`pointer-events-none / pointer-events-auto`	Pointer events behavior

Responsive Design

Command	Description
`sm:flex`	Apply flex at ≥640px
`md:grid-cols-2`	Two columns at ≥768px
`lg:grid-cols-3`	Three columns at ≥1024px
`xl:grid-cols-4`	Four columns at ≥1280px
`2xl:max-w-7xl`	Max width at ≥1536px
`sm:hidden md:block`	Hidden on small, visible on medium+
`text-sm md:text-base lg:text-lg`	Responsive font sizes
`p-4 md:p-8 lg:p-12`	Responsive padding
`flex-col md:flex-row`	Stack on mobile, row on desktop
`w-full md:w-1/2 lg:w-1/3`	Responsive widths
`max-sm:hidden`	Hidden below sm breakpoint (Tailwind v3.2+)

States

Command	Description
`hover:bg-blue-600`	Background on hover
`focus:outline-none focus:ring-2`	Remove outline, add ring on focus
`active:bg-blue-700`	Background when actively pressed
`disabled:opacity-50 disabled:cursor-not-allowed`	Styles for disabled elements
`first:mt-0 last:mb-0`	Remove margin from first/last child
`odd:bg-gray-50 even:bg-white`	Alternating row colors
`group-hover:text-blue-500`	Style child when parent (group) is hovered
`peer-focus:text-blue-500`	Style sibling when peer element is focused
`placeholder:text-gray-400`	Placeholder text style
`focus-within:ring-2`	Ring when any child has focus
`focus-visible:ring-2`	Ring only on keyboard focus (not mouse)
`dark:bg-gray-900 dark:text-white`	Dark mode styles
`aria-selected:bg-blue-100`	Style based on ARIA attribute
`data-[state=open]:bg-gray-100`	Style based on data attribute

Transitions & Animation

Command	Description
`transition`	Transition all properties (150ms ease)
`transition-colors`	Transition color properties only
`transition-opacity`	Transition opacity only
`transition-transform`	Transition transform only
`transition-all`	Transition all properties
`transition-none`	Disable transitions
`duration-75 / duration-100 / duration-150 / duration-200 / duration-300 / duration-500`	Transition duration in ms
`ease-linear / ease-in / ease-out / ease-in-out`	Transition timing function
`delay-100 / delay-200 / delay-300 / delay-500`	Transition delay in ms
`animate-spin`	Continuous rotation animation
`animate-ping`	Ping/pulse animation (like a notification dot)
`animate-pulse`	Gentle fade in/out (loading skeleton)
`animate-bounce`	Bouncing animation
`animate-none`	Remove animation
`transform / -translate-x-1/2 / -translate-y-1/2`	Center with transform translate
`scale-95 hover:scale-100`	Scale transform with hover
`rotate-45 / -rotate-45`	Rotate transform

Common Patterns

Command	Description
`flex items-center justify-center min-h-screen`	Center content on page
`flex items-center justify-between px-4 h-16`	Navbar layout
`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`	Responsive container with centered content
`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`	Responsive card grid
`fixed inset-0 bg-black/50 flex items-center justify-center z-50`	Modal overlay
`sr-only`	Screen reader only (visually hidden, accessible)
`not-sr-only`	Undo sr-only
`truncate / overflow-hidden text-ellipsis whitespace-nowrap`	Text truncation
`absolute inset-0`	Cover parent completely (needs relative parent)
`sticky top-0 z-10 bg-white/80 backdrop-blur`	Sticky glass header
`prose prose-lg`	Beautiful typography for articles (requires @tailwindcss/typography)