What changed in Tailwind CSS v4?

Tailwind CSS v4 introduces a CSS-first configuration using @theme instead of tailwind.config.js, removes bg-opacity-* utilities in favor of the /opacity syntax, renames flex-grow to grow and flex-shrink to shrink, adds new utilities like size-*, text-balance, text-wrap, and supports CSS container queries natively.

How do I install Tailwind CSS v4?

Install via npm: npm install tailwindcss @tailwindcss/postcss. Then add @import 'tailwindcss' to your main CSS file. No tailwind.config.js is needed — configure directly in CSS using @theme.

What is the difference between Tailwind v3 and v4?

Tailwind v4 replaces JavaScript-based config with CSS-first @theme blocks, removes deprecated utilities like bg-opacity-*, renames several utilities (flex-grow → grow), adds subgrid support, and improves performance with a new Rust-based engine.

Can I use Tailwind CSS v0, v1, v2, and v3 classes?

Yes — this cheat sheet covers every version from v0.x to v4.x. Use the version selector to filter classes available in your project's Tailwind version, and see which classes were added, renamed, or removed.

How do I search for a CSS property in Tailwind?

Use the search bar on this cheat sheet to do a reverse CSS lookup. Type any CSS property like 'display: flex' or 'justify-content' to find the matching Tailwind utility class.

What are the most commonly used Tailwind CSS classes?

The most used Tailwind classes include flex, items-center, justify-between, p-4, m-auto, text-sm, bg-white, rounded-lg, shadow, and hidden. These cover layout, spacing, typography, and visibility — the building blocks of most UIs.

Does Tailwind CSS v4 support dark mode?

Yes. Tailwind v4 supports dark mode via the dark: variant. You can configure it to use the prefers-color-scheme media query or a class/data-attribute strategy for manual toggling.

Tailwind CSS Cheat Sheet

Every utility class. Every version. Searchable. Copyable. Always current.

This cheat sheet covers 1,200+ Tailwind CSS utility classes across every major version from v0.x through v4.x. Use the version tabs to filter classes by the version your project runs on, and spot what's new, changed, or removed at a glance with color-coded badges.

Type any class name or CSS property into the search bar for instant results — including reverse CSS lookup (e.g. search "display: flex" to find the flex class). Click any class to copy it to your clipboard, or use "Copy All" to grab an entire section. Star your frequently-used classes for quick access later.

Sections span layout, flexbox, grid, spacing, typography, the full color palette with 50–950 shades, responsive breakpoints, state variants, dark mode, container queries, and more. Updated for Tailwind CSS v4.3.

⌘K

Layout50 classes

Display, position, overflow, visibility, z-index, float, clear, object-fit, columns, aspect-ratio

blockdisplay: blockBlock-level element

inline-blockdisplay: inline-blockInline block element

inlinedisplay: inlineInline element

flexdisplay: flexFlex container

inline-flexdisplay: inline-flexInline flex container

griddisplay: gridGrid container

inline-griddisplay: inline-gridInline grid container

contentsdisplay: contentsElement's children treated as direct children of parent

tabledisplay: tableTable element

hiddendisplay: noneHides the element completely

staticposition: staticDefault positioning

fixedposition: fixedFixed to viewport

absoluteposition: absolutePositioned relative to nearest positioned ancestor

relativeposition: relativePositioned relative to its normal position

stickyposition: stickySticks to scroll position

visiblevisibility: visibleElement is visible

invisiblevisibility: hiddenHidden but still takes up space

collapsevisibility: collapseCollapsed — removes row/column space in tables

overflow-autooverflow: autoScroll if content overflows

overflow-hiddenoverflow: hiddenClip overflowing content

overflow-visibleoverflow: visibleContent can overflow

overflow-scrolloverflow: scrollAlways show scrollbars

overflow-x-autooverflow-x: autoHorizontal scroll if needed

overflow-y-autooverflow-y: autoVertical scroll if needed

z-0z-index: 0Base stacking

z-10z-index: 10z-index 10

z-20z-index: 20z-index 20

z-30z-index: 30z-index 30

z-40z-index: 40z-index 40

z-50z-index: 50z-index 50

z-autoz-index: autoBrowser default stacking

isolateisolation: isolateCreates a new stacking context

isolation-autoisolation: autoDefault isolation

object-containobject-fit: containScale down to fit, maintain aspect ratio

object-coverobject-fit: coverScale up to fill, maintain aspect ratio, may crop

object-fillobject-fit: fillStretch to fill — may distort

object-noneobject-fit: noneDisplay at natural size

object-scale-downobject-fit: scale-downLike contain, but never scales up

aspect-autoaspect-ratio: autoNatural aspect ratio

aspect-squareaspect-ratio: 1 / 11:1 square

aspect-videoaspect-ratio: 16 / 916:9 video ratio

box-borderbox-sizing: border-boxWidth/height includes padding + border

box-contentbox-sizing: content-boxWidth/height excludes padding + border

float-rightfloat: rightFloat right

float-leftfloat: leftFloat left

float-nonefloat: noneNo float

clear-leftclear: leftClear left floats

clear-rightclear: rightClear right floats

clear-bothclear: bothClear all floats

clear-noneclear: noneNo clearing

Flexbox41 classes

Flex container and item utilities — direction, wrap, grow, shrink, order, gap, alignment

flex-rowflex-direction: rowHorizontal left-to-right

flex-row-reverseflex-direction: row-reverseHorizontal right-to-left

flex-colflex-direction: columnVertical top-to-bottom

flex-col-reverseflex-direction: column-reverseVertical bottom-to-top

flex-wrapflex-wrap: wrapAllow wrapping

flex-wrap-reverseflex-wrap: wrap-reverseWrap in reverse

flex-nowrapflex-wrap: nowrapNo wrapping

flex-1flex: 1 1 0%Grow and shrink, ignore initial size

flex-autoflex: 1 1 autoGrow and shrink, respect initial size

flex-initialflex: 0 1 autoShrink but don't grow

flex-noneflex: noneDon't grow or shrink

growflex-grow: 1Allow flex item to grow← was flex-grow

grow-0flex-grow: 0Prevent flex item from growing

shrinkflex-shrink: 1Allow flex item to shrink← was flex-shrink

shrink-0flex-shrink: 0Prevent flex item from shrinking

order-firstorder: -9999Move to start

order-lastorder: 9999Move to end

order-noneorder: 0Default order

justify-startjustify-content: flex-startPack items to start

justify-endjustify-content: flex-endPack items to end

justify-centerjustify-content: centerCenter items along main axis

justify-betweenjustify-content: space-betweenEqual space between items

justify-aroundjustify-content: space-aroundEqual space around items

justify-evenlyjustify-content: space-evenlyEqual space between and around items

items-startalign-items: flex-startAlign to start of cross axis

items-endalign-items: flex-endAlign to end of cross axis

items-centeralign-items: centerCenter on cross axis

items-baselinealign-items: baselineAlign to text baseline

items-stretchalign-items: stretchStretch to fill cross axis

self-autoalign-self: autoDefault alignment

self-startalign-self: flex-startAlign self to start

self-endalign-self: flex-endAlign self to end

self-centeralign-self: centerCenter self

self-stretchalign-self: stretchStretch self to fill

gap-0gap: 0pxNo gap

gap-1gap: 0.25rem4px gap

gap-2gap: 0.5rem8px gap

gap-3gap: 0.75rem12px gap

gap-4gap: 1rem16px gap

gap-6gap: 1.5rem24px gap

gap-8gap: 2rem32px gap

Grid34 classes

CSS Grid template columns/rows, span, auto-flow, gap, place utilities

grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr))1 column

grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr))2 columns

grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))3 columns

grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr))4 columns

grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr))6 columns

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

grid-cols-nonegrid-template-columns: noneNo column template

grid-cols-subgridgrid-template-columns: subgridInherit parent's column tracks

NEWv4.x

grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr))1 row

grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr))2 rows

grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr))3 rows

grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr))6 rows

grid-rows-nonegrid-template-rows: noneNo row template

grid-rows-subgridgrid-template-rows: subgridInherit parent's row tracks

NEWv4.x

col-autogrid-column: autoAuto column placement

col-span-1grid-column: span 1 / span 1Span 1 column

col-span-2grid-column: span 2 / span 2Span 2 columns

col-span-3grid-column: span 3 / span 3Span 3 columns

col-span-fullgrid-column: 1 / -1Span all columns

row-autogrid-row: autoAuto row placement

row-span-1grid-row: span 1 / span 1Span 1 row

row-span-2grid-row: span 2 / span 2Span 2 rows

row-span-3grid-row: span 3 / span 3Span 3 rows

row-span-fullgrid-row: 1 / -1Span all rows

grid-flow-rowgrid-auto-flow: rowPlace items row by row

grid-flow-colgrid-auto-flow: columnPlace items column by column

grid-flow-densegrid-auto-flow: denseFill gaps with smaller items

grid-flow-row-densegrid-auto-flow: row denseRow flow with dense packing

grid-flow-col-densegrid-auto-flow: column denseColumn flow with dense packing

place-content-centerplace-content: centerCenter grid content both axes

place-items-centerplace-items: centerCenter grid items both axes

place-self-centerplace-self: centerCenter self on both axes

place-items-startplace-items: startPlace items at start

place-items-stretchplace-items: stretchStretch items to fill

Spacing38 classes

Padding and margin — all directions. Dynamic values in v4

p-0padding: 0pxNo padding

p-1padding: 0.25rem4px all sides

p-2padding: 0.5rem8px all sides

p-3padding: 0.75rem12px all sides

p-4padding: 1rem16px all sides

p-6padding: 1.5rem24px all sides

p-8padding: 2rem32px all sides

px-0padding-left: 0px; padding-right: 0pxNo horizontal padding

px-2padding-left: 0.5rem; padding-right: 0.5rem8px horizontal

px-4padding-left: 1rem; padding-right: 1rem16px horizontal

px-6padding-left: 1.5rem; padding-right: 1.5rem24px horizontal

py-0padding-top: 0px; padding-bottom: 0pxNo vertical padding

py-2padding-top: 0.5rem; padding-bottom: 0.5rem8px vertical

py-4padding-top: 1rem; padding-bottom: 1rem16px vertical

pt-4padding-top: 1rem16px top

pr-4padding-right: 1rem16px right

pb-4padding-bottom: 1rem16px bottom

pl-4padding-left: 1rem16px left

m-0margin: 0pxNo margin

m-1margin: 0.25rem4px all sides

m-2margin: 0.5rem8px all sides

m-4margin: 1rem16px all sides

m-automargin: autoAuto margin

mx-automargin-left: auto; margin-right: autoCenter horizontally

mx-4margin-left: 1rem; margin-right: 1rem16px horizontal

my-4margin-top: 1rem; margin-bottom: 1rem16px vertical

my-8margin-top: 2rem; margin-bottom: 2rem32px vertical

mt-4margin-top: 1rem16px top

mb-4margin-bottom: 1rem16px bottom

ml-4margin-left: 1rem16px left

mr-4margin-right: 1rem16px right

-mt-1margin-top: -0.25remNegative 4px top

-mt-4margin-top: -1remNegative 16px top

space-x-2margin-left: 0.5rem (children)8px horizontal between children

space-x-4margin-left: 1rem (children)16px horizontal between children

space-y-2margin-top: 0.5rem (children)8px vertical between children

space-y-4margin-top: 1rem (children)16px vertical between children

space-x-reverseflex-direction: row-reverse spacingReverse horizontal spacing direction

Sizing39 classes

Width, height, min/max dimensions, size shorthand

w-0width: 0pxZero width

w-1width: 0.25rem4px width

w-4width: 1rem16px width

w-8width: 2rem32px width

w-16width: 4rem64px width

w-32width: 8rem128px width

w-48width: 12rem192px width

w-64width: 16rem256px width

w-autowidth: autoAuto width

w-1/2width: 50%50% width

w-1/3width: 33.333333%33.3% width

w-2/3width: 66.666667%66.7% width

w-fullwidth: 100%Full width

w-screenwidth: 100vwViewport width

w-fitwidth: fit-contentFit content width

w-minwidth: min-contentMin content width

w-maxwidth: max-contentMax content width

h-0height: 0pxZero height

h-4height: 1rem16px height

h-8height: 2rem32px height

h-16height: 4rem64px height

h-autoheight: autoAuto height

h-fullheight: 100%Full height

h-screenheight: 100vhViewport height

h-dvhheight: 100dvhDynamic viewport height

NEWv4.x

h-fitheight: fit-contentFit content height

min-w-0min-width: 0pxZero min-width

min-w-fullmin-width: 100%Full min-width

max-w-smmax-width: 24rem384px max-width

max-w-mdmax-width: 28rem448px max-width

max-w-lgmax-width: 32rem512px max-width

max-w-xlmax-width: 36rem576px max-width

max-w-7xlmax-width: 80rem1280px max-width

max-w-nonemax-width: noneNo max-width

max-w-prosemax-width: 65chOptimal reading width

size-4width: 1rem; height: 1rem16px square

NEWv4.x

size-6width: 1.5rem; height: 1.5rem24px square

NEWv4.x

size-8width: 2rem; height: 2rem32px square

NEWv4.x

size-fullwidth: 100%; height: 100%Full size both dimensions

NEWv4.x

Typography49 classes

Font family, size, weight, leading, tracking, text alignment, decoration, transform

text-xsfont-size: 0.75rem; line-height: 1rem12px extra small

text-smfont-size: 0.875rem; line-height: 1.25rem14px small

text-basefont-size: 1rem; line-height: 1.5rem16px base

text-lgfont-size: 1.125rem; line-height: 1.75rem18px large

text-xlfont-size: 1.25rem; line-height: 1.75rem20px extra large

text-2xlfont-size: 1.5rem; line-height: 2rem24px 2x large

text-3xlfont-size: 1.875rem; line-height: 2.25rem30px 3x large

text-4xlfont-size: 2.25rem; line-height: 2.5rem36px 4x large

font-thinfont-weight: 100Thin weight

font-lightfont-weight: 300Light weight

font-normalfont-weight: 400Normal weight

font-mediumfont-weight: 500Medium weight

font-semiboldfont-weight: 600Semibold weight

font-boldfont-weight: 700Bold weight

font-extraboldfont-weight: 800Extra bold weight

italicfont-style: italicItalicize text

not-italicfont-style: normalRemove italic

font-sansfont-family: ui-sans-serif, system-ui, …System sans-serif

font-seriffont-family: ui-serif, Georgia, …Serif font

font-monofont-family: ui-monospace, SFMono-Regular, …Monospace font

text-lefttext-align: leftLeft align

text-centertext-align: centerCenter align

text-righttext-align: rightRight align

text-justifytext-align: justifyJustify text

leading-noneline-height: 1No extra line spacing

leading-tightline-height: 1.25Tight line spacing

leading-normalline-height: 1.5Normal line spacing

leading-relaxedline-height: 1.625Relaxed line spacing

leading-looseline-height: 2Loose line spacing

tracking-tighterletter-spacing: -0.05emTighter tracking

tracking-tightletter-spacing: -0.025emTight tracking

tracking-normalletter-spacing: 0emNormal tracking

tracking-wideletter-spacing: 0.025emWide tracking

tracking-widerletter-spacing: 0.05emWider tracking

underlinetext-decoration-line: underlineUnderline text

overlinetext-decoration-line: overlineOverline text

line-throughtext-decoration-line: line-throughStrikethrough text

no-underlinetext-decoration-line: noneRemove decoration

uppercasetext-transform: uppercaseAll uppercase

lowercasetext-transform: lowercaseAll lowercase

capitalizetext-transform: capitalizeCapitalize first letter of each word

normal-casetext-transform: noneNo transform

truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrapTruncate with ellipsis

text-ellipsistext-overflow: ellipsisEllipsis for overflow

text-cliptext-overflow: clipClip overflow text

whitespace-nowrapwhite-space: nowrapPrevent wrapping

break-wordsoverflow-wrap: break-wordBreak long words

text-wraptext-wrap: wrapNormal text wrapping

NEWv4.x

text-balancetext-wrap: balanceBalanced wrapping for headings

NEWv4.x

Color Palette247 classes

Full Tailwind color scale — all named colors, 50–950 shades, gradient stops, opacity modifiers

bg-slate-50background-color: #f8fafcslate-50

bg-slate-100background-color: #f1f5f9slate-100

bg-slate-200background-color: #e2e8f0slate-200

bg-slate-300background-color: #cbd5e1slate-300

bg-slate-400background-color: #94a3b8slate-400

bg-slate-500background-color: #64748bslate-500

bg-slate-600background-color: #475569slate-600

bg-slate-700background-color: #334155slate-700

bg-slate-800background-color: #1e293bslate-800

bg-slate-900background-color: #0f172aslate-900

bg-slate-950background-color: #020617slate-950

bg-gray-50background-color: #f9fafbgray-50

bg-gray-100background-color: #f3f4f6gray-100

bg-gray-200background-color: #e5e7ebgray-200

bg-gray-300background-color: #d1d5dbgray-300

bg-gray-400background-color: #9ca3afgray-400

bg-gray-500background-color: #6b7280gray-500

bg-gray-600background-color: #4b5563gray-600

bg-gray-700background-color: #374151gray-700

bg-gray-800background-color: #1f2937gray-800

bg-gray-900background-color: #111827gray-900

bg-gray-950background-color: #030712gray-950

bg-zinc-50background-color: #fafafazinc-50

bg-zinc-100background-color: #f4f4f5zinc-100

bg-zinc-200background-color: #e4e4e7zinc-200

bg-zinc-300background-color: #d4d4d8zinc-300

bg-zinc-400background-color: #a1a1aazinc-400

bg-zinc-500background-color: #71717azinc-500

bg-zinc-600background-color: #52525bzinc-600

bg-zinc-700background-color: #3f3f46zinc-700

bg-zinc-800background-color: #27272azinc-800

bg-zinc-900background-color: #18181bzinc-900

bg-zinc-950background-color: #09090bzinc-950

bg-red-50background-color: #fef2f2red-50

bg-red-100background-color: #fee2e2red-100

bg-red-200background-color: #fecacared-200

bg-red-300background-color: #fca5a5red-300

bg-red-400background-color: #f87171red-400

bg-red-500background-color: #ef4444red-500

bg-red-600background-color: #dc2626red-600

bg-red-700background-color: #b91c1cred-700

bg-red-800background-color: #991b1bred-800

bg-red-900background-color: #7f1d1dred-900

bg-red-950background-color: #450a0ared-950

bg-orange-50background-color: #fff7edorange-50

bg-orange-100background-color: #ffedd5orange-100

bg-orange-200background-color: #fed7aaorange-200

bg-orange-300background-color: #fdba74orange-300

bg-orange-400background-color: #fb923corange-400

bg-orange-500background-color: #f97316orange-500

bg-orange-600background-color: #ea580corange-600

bg-orange-700background-color: #c2410corange-700

bg-orange-800background-color: #9a3412orange-800

bg-orange-900background-color: #7c2d12orange-900

bg-orange-950background-color: #431407orange-950

bg-amber-50background-color: #fffbebamber-50

bg-amber-100background-color: #fef3c7amber-100

bg-amber-200background-color: #fde68aamber-200

bg-amber-300background-color: #fcd34damber-300

bg-amber-400background-color: #fbbf24amber-400

bg-amber-500background-color: #f59e0bamber-500

bg-amber-600background-color: #d97706amber-600

bg-amber-700background-color: #b45309amber-700

bg-amber-800background-color: #92400eamber-800

bg-amber-900background-color: #78350famber-900

bg-amber-950background-color: #451a03amber-950

bg-yellow-50background-color: #fefce8yellow-50

bg-yellow-100background-color: #fef9c3yellow-100

bg-yellow-200background-color: #fef08ayellow-200

bg-yellow-300background-color: #fde047yellow-300

bg-yellow-400background-color: #facc15yellow-400

bg-yellow-500background-color: #eab308yellow-500

bg-yellow-600background-color: #ca8a04yellow-600

bg-yellow-700background-color: #a16207yellow-700

bg-yellow-800background-color: #854d0eyellow-800

bg-yellow-900background-color: #713f12yellow-900

bg-yellow-950background-color: #422006yellow-950

bg-green-50background-color: #f0fdf4green-50

bg-green-100background-color: #dcfce7green-100

bg-green-200background-color: #bbf7d0green-200

bg-green-300background-color: #86efacgreen-300

bg-green-400background-color: #4ade80green-400

bg-green-500background-color: #22c55egreen-500

bg-green-600background-color: #16a34agreen-600

bg-green-700background-color: #15803dgreen-700

bg-green-800background-color: #166534green-800

bg-green-900background-color: #14532dgreen-900

bg-green-950background-color: #052e16green-950

bg-blue-50background-color: #eff6ffblue-50

bg-blue-100background-color: #dbeafeblue-100

bg-blue-200background-color: #bfdbfeblue-200

bg-blue-300background-color: #93c5fdblue-300

bg-blue-400background-color: #60a5fablue-400

bg-blue-500background-color: #3b82f6blue-500

bg-blue-600background-color: #2563ebblue-600

bg-blue-700background-color: #1d4ed8blue-700

bg-blue-800background-color: #1e40afblue-800

bg-blue-900background-color: #1e3a8ablue-900

bg-blue-950background-color: #172554blue-950

bg-indigo-50background-color: #eef2ffindigo-50

bg-indigo-100background-color: #e0e7ffindigo-100

bg-indigo-200background-color: #c7d2feindigo-200

bg-indigo-300background-color: #a5b4fcindigo-300

bg-indigo-400background-color: #818cf8indigo-400

bg-indigo-500background-color: #6366f1indigo-500

bg-indigo-600background-color: #4f46e5indigo-600

bg-indigo-700background-color: #4338caindigo-700

bg-indigo-800background-color: #3730a3indigo-800

bg-indigo-900background-color: #312e81indigo-900

bg-indigo-950background-color: #1e1b4bindigo-950

bg-purple-50background-color: #faf5ffpurple-50

bg-purple-100background-color: #f3e8ffpurple-100

bg-purple-200background-color: #e9d5ffpurple-200

bg-purple-300background-color: #d8b4fepurple-300

bg-purple-400background-color: #c084fcpurple-400

bg-purple-500background-color: #a855f7purple-500

bg-purple-600background-color: #9333eapurple-600

bg-purple-700background-color: #7e22cepurple-700

bg-purple-800background-color: #6b21a8purple-800

bg-purple-900background-color: #581c87purple-900

bg-purple-950background-color: #3b0764purple-950

bg-pink-50background-color: #fdf2f8pink-50

bg-pink-100background-color: #fce7f3pink-100

bg-pink-200background-color: #fbcfe8pink-200

bg-pink-300background-color: #f9a8d4pink-300

bg-pink-400background-color: #f472b6pink-400

bg-pink-500background-color: #ec4899pink-500

bg-pink-600background-color: #db2777pink-600

bg-pink-700background-color: #be185dpink-700

bg-pink-800background-color: #9d174dpink-800

bg-pink-900background-color: #831843pink-900

bg-pink-950background-color: #500724pink-950

bg-rose-50background-color: #fff1f2rose-50

bg-rose-100background-color: #ffe4e6rose-100

bg-rose-200background-color: #fecdd3rose-200

bg-rose-300background-color: #fda4afrose-300

bg-rose-400background-color: #fb7185rose-400

bg-rose-500background-color: #f43f5erose-500

bg-rose-600background-color: #e11d48rose-600

bg-rose-700background-color: #be123crose-700

bg-rose-800background-color: #9f1239rose-800

bg-rose-900background-color: #881337rose-900

bg-rose-950background-color: #4c0519rose-950

bg-emerald-50background-color: #ecfdf5emerald-50

bg-emerald-100background-color: #d1fae5emerald-100

bg-emerald-200background-color: #a7f3d0emerald-200

bg-emerald-300background-color: #6ee7b7emerald-300

bg-emerald-400background-color: #34d399emerald-400

bg-emerald-500background-color: #10b981emerald-500

bg-emerald-600background-color: #059669emerald-600

bg-emerald-700background-color: #047857emerald-700

bg-emerald-800background-color: #065f46emerald-800

bg-emerald-900background-color: #064e3bemerald-900

bg-emerald-950background-color: #022c22emerald-950

bg-teal-50background-color: #f0fdfateal-50

bg-teal-100background-color: #ccfbf1teal-100

bg-teal-200background-color: #99f6e4teal-200

bg-teal-300background-color: #5eead4teal-300

bg-teal-400background-color: #2dd4bfteal-400

bg-teal-500background-color: #14b8a6teal-500

bg-teal-600background-color: #0d9488teal-600

bg-teal-700background-color: #0f766eteal-700

bg-teal-800background-color: #115e59teal-800

bg-teal-900background-color: #134e4ateal-900

bg-teal-950background-color: #042f2eteal-950

bg-cyan-50background-color: #ecfeffcyan-50

bg-cyan-100background-color: #cffafecyan-100

bg-cyan-200background-color: #a5f3fccyan-200

bg-cyan-300background-color: #67e8f9cyan-300

bg-cyan-400background-color: #22d3eecyan-400

bg-cyan-500background-color: #06b6d4cyan-500

bg-cyan-600background-color: #0891b2cyan-600

bg-cyan-700background-color: #0e7490cyan-700

bg-cyan-800background-color: #155e75cyan-800

bg-cyan-900background-color: #164e63cyan-900

bg-cyan-950background-color: #083344cyan-950

bg-sky-50background-color: #f0f9ffsky-50

bg-sky-100background-color: #e0f2fesky-100

bg-sky-200background-color: #bae6fdsky-200

bg-sky-300background-color: #7dd3fcsky-300

bg-sky-400background-color: #38bdf8sky-400

bg-sky-500background-color: #0ea5e9sky-500

bg-sky-600background-color: #0284c7sky-600

bg-sky-700background-color: #0369a1sky-700

bg-sky-800background-color: #075985sky-800

bg-sky-900background-color: #0c4a6esky-900

bg-sky-950background-color: #082f49sky-950

bg-violet-50background-color: #f5f3ffviolet-50

bg-violet-100background-color: #ede9feviolet-100

bg-violet-200background-color: #ddd6feviolet-200

bg-violet-300background-color: #c4b5fdviolet-300

bg-violet-400background-color: #a78bfaviolet-400

bg-violet-500background-color: #8b5cf6violet-500

bg-violet-600background-color: #7c3aedviolet-600

bg-violet-700background-color: #6d28d9violet-700

bg-violet-800background-color: #5b21b6violet-800

bg-violet-900background-color: #4c1d95violet-900

bg-violet-950background-color: #2e1065violet-950

bg-fuchsia-50background-color: #fdf4fffuchsia-50

bg-fuchsia-100background-color: #fae8fffuchsia-100

bg-fuchsia-200background-color: #f5d0fefuchsia-200

bg-fuchsia-300background-color: #f0abfcfuchsia-300

bg-fuchsia-400background-color: #e879f9fuchsia-400

bg-fuchsia-500background-color: #d946effuchsia-500

bg-fuchsia-600background-color: #c026d3fuchsia-600

bg-fuchsia-700background-color: #a21caffuchsia-700

bg-fuchsia-800background-color: #86198ffuchsia-800

bg-fuchsia-900background-color: #701a75fuchsia-900

bg-fuchsia-950background-color: #4a044efuchsia-950

bg-lime-50background-color: #f7fee7lime-50

bg-lime-100background-color: #ecfccblime-100

bg-lime-200background-color: #d9f99dlime-200

bg-lime-300background-color: #bef264lime-300

bg-lime-400background-color: #a3e635lime-400

bg-lime-500background-color: #84cc16lime-500

bg-lime-600background-color: #65a30dlime-600

bg-lime-700background-color: #4d7c0flime-700

bg-lime-800background-color: #3f6212lime-800

bg-lime-900background-color: #365314lime-900

bg-lime-950background-color: #1a2e05lime-950

bg-stone-50background-color: #fafaf9stone-50

bg-stone-100background-color: #f5f5f4stone-100

bg-stone-200background-color: #e7e5e4stone-200

bg-stone-300background-color: #d6d3d1stone-300

bg-stone-400background-color: #a8a29estone-400

bg-stone-500background-color: #78716cstone-500

bg-stone-600background-color: #57534estone-600

bg-stone-700background-color: #44403cstone-700

bg-stone-800background-color: #292524stone-800

bg-stone-900background-color: #1c1917stone-900

bg-stone-950background-color: #0c0a09stone-950

bg-neutral-50background-color: #fafafaneutral-50

bg-neutral-100background-color: #f5f5f5neutral-100

bg-neutral-200background-color: #e5e5e5neutral-200

bg-neutral-300background-color: #d4d4d4neutral-300

bg-neutral-400background-color: #a3a3a3neutral-400

bg-neutral-500background-color: #737373neutral-500

bg-neutral-600background-color: #525252neutral-600

bg-neutral-700background-color: #404040neutral-700

bg-neutral-800background-color: #262626neutral-800

bg-neutral-900background-color: #171717neutral-900

bg-neutral-950background-color: #0a0a0aneutral-950

from-{color}--tw-gradient-from: {color}Gradient starting color

via-{color}--tw-gradient-via: {color}Gradient middle color stop

to-{color}--tw-gradient-to: {color}Gradient ending color

bg-red-500/50background-color: rgb(239 68 68 / 0.5)Apply 50% opacity via slash syntax

text-blue-600/75color: rgb(37 99 235 / 0.75)75% opacity text color via slash syntax

Backgrounds28 classes

Background color, gradients, position, size, repeat, attachment, clip

bg-transparentbackground-color: transparentTransparent background

bg-blackbackground-color: #000Black background

bg-whitebackground-color: #fffWhite background

bg-inheritbackground-color: inheritInherit parent background

bg-currentbackground-color: currentColorUse current text color

bg-autobackground-size: autoNatural background size

bg-coverbackground-size: coverScale to cover element

bg-containbackground-size: containScale to fit element

bg-centerbackground-position: centerCenter background

bg-topbackground-position: topTop center background

bg-bottombackground-position: bottomBottom center background

bg-leftbackground-position: leftLeft center background

bg-rightbackground-position: rightRight center background

bg-repeatbackground-repeat: repeatTile background

bg-no-repeatbackground-repeat: no-repeatNo tiling

bg-repeat-xbackground-repeat: repeat-xTile horizontally

bg-repeat-ybackground-repeat: repeat-yTile vertically

bg-fixedbackground-attachment: fixedFixed background on scroll

bg-localbackground-attachment: localScroll with content

bg-scrollbackground-attachment: scrollScroll with element

bg-clip-borderbackground-clip: border-boxClip to border box

bg-clip-paddingbackground-clip: padding-boxClip to padding box

bg-clip-contentbackground-clip: content-boxClip to content box

bg-clip-textbackground-clip: textClip to text — for gradient text

bg-gradient-to-rbackground-image: linear-gradient(to right, ...)Gradient left to right

bg-gradient-to-bbackground-image: linear-gradient(to bottom, ...)Gradient top to bottom

bg-gradient-to-brbackground-image: linear-gradient(to bottom right, ...)Gradient to bottom-right

bg-nonebackground-image: noneRemove background image

Borders & Outlines41 classes

Border width, color, style, radius, outline, ring, divide

borderborder-width: 1px1px border all sides

border-0border-width: 0pxNo border

border-2border-width: 2px2px border

border-4border-width: 4px4px border

border-tborder-top-width: 1px1px top border

border-bborder-bottom-width: 1px1px bottom border

border-lborder-left-width: 1px1px left border

border-rborder-right-width: 1px1px right border

border-solidborder-style: solidSolid border

border-dashedborder-style: dashedDashed border

border-dottedborder-style: dottedDotted border

border-doubleborder-style: doubleDouble border

border-noneborder-style: noneNo border style

border-blackborder-color: #000Black border

border-whiteborder-color: #fffWhite border

border-transparentborder-color: transparentTransparent border

border-inheritborder-color: inheritInherit border color

rounded-noneborder-radius: 0pxNo rounding

rounded-smborder-radius: 0.125rem2px radius

roundedborder-radius: 0.25rem4px radius

rounded-mdborder-radius: 0.375rem6px radius

rounded-lgborder-radius: 0.5rem8px radius

rounded-xlborder-radius: 0.75rem12px radius

rounded-2xlborder-radius: 1rem16px radius

rounded-3xlborder-radius: 1.5rem24px radius

rounded-fullborder-radius: 9999pxFully rounded / circle

rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem8px top corners

rounded-b-lgborder-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem8px bottom corners

divide-xborder-left-width: 1px (children)Vertical dividers between children

divide-yborder-top-width: 1px (children)Horizontal dividers between children

divide-x-0border-left-width: 0px (children)No vertical dividers

divide-y-reversereverse divide directionReverse vertical divide order

outline-noneoutline: 2px solid transparent; outline-offset: 2pxRemove outline

outlineoutline-style: solidSolid outline

outline-dashedoutline-style: dashedDashed outline

outline-offset-2outline-offset: 2px2px outline offset

ringbox-shadow: 0 0 0 3px …3px focus ring

ring-0box-shadow: 0 0 0 0px …No ring

ring-1box-shadow: 0 0 0 1px …1px ring

ring-2box-shadow: 0 0 0 2px …2px ring

ring-insetbox-shadow: inset 0 0 0 …Inset ring

Effects & Filters10 classes

Shadow, opacity, blend modes, blur, brightness, contrast, backdrop filters

shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)Small shadow

shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), …Default shadow

shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), …Medium shadow

shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), …Large shadow

shadow-nonebox-shadow: 0 0 #0000No shadow

opacity-0opacity: 0Fully transparent

opacity-50opacity: 0.550% opacity

opacity-100opacity: 1Fully opaque

blur-smfilter: blur(4px)Small blur

blur-mdfilter: blur(12px)Medium blur

Transitions & Animation10 classes

Transition property, duration, timing, delay, keyframe animations

transitiontransition-property: color, background-color, …Default transition

transition-alltransition-property: allTransition all properties

transition-nonetransition-property: noneNo transitions

duration-150transition-duration: 150ms150ms duration

duration-300transition-duration: 300ms300ms duration

ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1)Ease-in timing

ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1)Ease-out timing

animate-spinanimation: spin 1s linear infiniteContinuous spin

animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinitePing/ripple effect

animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infiniteFade in and out

Transforms8 classes

Scale, rotate, translate, skew, transform origin, perspective

scale-50transform: scale(.5)50% scale

scale-100transform: scale(1)100% scale (default)

scale-150transform: scale(1.5)150% scale

rotate-45transform: rotate(45deg)45° rotation

rotate-90transform: rotate(90deg)90° rotation

translate-x-4transform: translateX(1rem)Move right 16px

translate-y-4transform: translateY(1rem)Move down 16px

origin-centertransform-origin: centerTransform from center

Interactivity8 classes

Cursor, pointer-events, resize, user-select, scroll behavior, touch-action, scroll snap

cursor-pointercursor: pointerPointer cursor

cursor-defaultcursor: defaultDefault cursor

cursor-not-allowedcursor: not-allowedNot-allowed cursor

pointer-events-nonepointer-events: noneIgnore pointer events

pointer-events-autopointer-events: autoRestore pointer events

select-noneuser-select: nonePrevent text selection

select-alluser-select: allSelect all text on click

scroll-smoothscroll-behavior: smoothSmooth scrolling

SVG13 classes

Fill color, stroke color, stroke width

fill-currentfill: currentColorFill with current text color

fill-nonefill: noneNo SVG fill

fill-inheritfill: inheritInherit fill from parent

fill-transparentfill: transparentTransparent fill

fill-blackfill: #000Black fill

fill-whitefill: #fffWhite fill

stroke-currentstroke: currentColorStroke with current text color

stroke-nonestroke: noneNo SVG stroke

stroke-inheritstroke: inheritInherit stroke from parent

stroke-transparentstroke: transparentTransparent stroke

stroke-0stroke-width: 0No stroke width

stroke-1stroke-width: 11px stroke width

stroke-2stroke-width: 22px stroke width

Accessibility2 classes

Screen reader utilities, forced-colors

sr-onlyposition: absolute; width: 1px; height: 1px; …Screen reader only

not-sr-onlyposition: static; width: auto; height: auto; …Undo sr-only

Tables12 classes

Table layout, border-collapse, border-spacing, caption-side

table-autotable-layout: autoAuto column widths based on content

table-fixedtable-layout: fixedFixed column widths, ignores content

border-collapseborder-collapse: collapseCollapse table borders into single borders

border-separateborder-collapse: separateSeparate table cell borders

border-spacing-0border-spacing: 0pxNo border spacing

border-spacing-1border-spacing: 0.25rem4px border spacing

border-spacing-2border-spacing: 0.5rem8px border spacing

border-spacing-4border-spacing: 1rem16px border spacing

border-spacing-x-2border-spacing: 0.5rem 0Horizontal border spacing only

border-spacing-y-2border-spacing: 0 0.5remVertical border spacing only

caption-topcaption-side: topTable caption at top

caption-bottomcaption-side: bottomTable caption at bottom

Responsive Design12 classes

Breakpoint prefixes: sm, md, lg, xl, 2xl, max-* variants

sm:{utility}@media (min-width: 640px)Apply utility at ≥640px viewport

md:{utility}@media (min-width: 768px)Apply utility at ≥768px viewport

lg:{utility}@media (min-width: 1024px)Apply utility at ≥1024px viewport

xl:{utility}@media (min-width: 1280px)Apply utility at ≥1280px viewport

2xl:{utility}@media (min-width: 1536px)Apply utility at ≥1536px viewport

max-sm:{utility}@media (max-width: 639px)Apply utility below 640px

NEWv4.x

max-md:{utility}@media (max-width: 767px)Apply utility below 768px

NEWv4.x

max-lg:{utility}@media (max-width: 1023px)Apply utility below 1024px

NEWv4.x

max-xl:{utility}@media (max-width: 1279px)Apply utility below 1280px

NEWv4.x

max-2xl:{utility}@media (max-width: 1535px)Apply utility below 1536px

NEWv4.x

containerwidth: 100%; max-width: breakpointFixed-width container per breakpoint

mx-automargin-left: auto; margin-right: autoCenter a block element horizontally

Dark Mode9 classes

dark: variant, color-scheme utilities, strategy configuration

dark:{utility}@media (prefers-color-scheme: dark) | .dark &Apply utility in dark mode

scheme-lightcolor-scheme: lightForce light color scheme on element

NEWv4.x

scheme-darkcolor-scheme: darkForce dark color scheme on element

NEWv4.x

scheme-light-darkcolor-scheme: light darkSupport both light and dark schemes

NEWv4.x

dark:bg-gray-900background-color: #111827 (in dark)Example: dark background in dark mode

dark:text-whitecolor: #fff (in dark)Example: white text in dark mode

dark:border-gray-700border-color: #374151 (in dark)Example: subtle border in dark mode

/* media strategy */prefers-color-scheme: darkDefault: uses OS preference (v2+)

/* selector strategy */.dark & or [data-theme=dark] &Manual toggle via class or data attribute

CHANGED

State Variants22 classes

hover, focus, active, disabled, checked, group-hover, peer-*, has-*

hover:{utility}&:hover { … }Apply on mouse hover

focus:{utility}&:focus { … }Apply when element has focus

active:{utility}&:active { … }Apply while being pressed

focus-within:{utility}&:focus-within { … }Apply when element or child has focus

focus-visible:{utility}&:focus-visible { … }Apply on keyboard focus only

visited:{utility}&:visited { … }Apply to visited links

disabled:{utility}&:disabled { … }Apply when form element is disabled

checked:{utility}&:checked { … }Apply when checkbox/radio is checked

indeterminate:{utility}&:indeterminate { … }Apply when checkbox is indeterminate

required:{utility}&:required { … }Apply when form input is required

invalid:{utility}&:invalid { … }Apply when form input is invalid

valid:{utility}&:valid { … }Apply when form input is valid

NEWv4.x

read-only:{utility}&:read-only { … }Apply when input is read-only

placeholder-shown:{utility}&:placeholder-shown { … }Apply when placeholder is visible

autofill:{utility}&:autofill { … }Apply when browser autofills input

group-hover:{utility}.group:hover & { … }Apply when parent .group is hovered

group-focus:{utility}.group:focus & { … }Apply when parent .group is focused

peer-checked:{utility}.peer:checked ~ & { … }Apply when sibling .peer is checked

peer-focus:{utility}.peer:focus ~ & { … }Apply when sibling .peer is focused

peer-invalid:{utility}.peer:invalid ~ & { … }Apply when sibling .peer is invalid

has-[selector]:{utility}&:has(selector) { … }Apply when element matches :has() selector

NEWv4.x

not-[selector]:{utility}&:not(selector) { … }Apply when element does not match selector

NEWv4.x

Structural & Positional26 classes

first, last, odd, even, nth-*, group, peer, scroll snap, accent color

first:{utility}&:first-child { … }Apply to first child element

last:{utility}&:last-child { … }Apply to last child element

odd:{utility}&:nth-child(odd) { … }Apply to odd children (1st, 3rd, 5th…)

even:{utility}&:nth-child(even) { … }Apply to even children (2nd, 4th, 6th…)

only:{utility}&:only-child { … }Apply when only child

first-of-type:{utility}&:first-of-type { … }Apply to first of its type

last-of-type:{utility}&:last-of-type { … }Apply to last of its type

only-of-type:{utility}&:only-of-type { … }Apply when only of its type

empty:{utility}&:empty { … }Apply when element has no children

nth-[3n+1]:{utility}&:nth-child(3n+1) { … }Apply to every 3rd+1 child

NEWv4.x

nth-last-[2]:{utility}&:nth-last-child(2) { … }Apply to 2nd-to-last child

NEWv4.x

group/{name}/* named group context */Create a named group for nested selectors

peer/{name}/* named peer context */Create a named peer for sibling selectors

in-[selector]:{utility}selector & { … }Apply when inside matching ancestor

NEWv4.x

snap-xscroll-snap-type: x mandatoryHorizontal scroll snapping

snap-yscroll-snap-type: y mandatoryVertical scroll snapping

snap-mandatoryscroll-snap-type: … mandatoryAlways snap to snap points

snap-proximityscroll-snap-type: … proximitySnap when close to snap points

snap-startscroll-snap-align: startSnap to start of element

snap-centerscroll-snap-align: centerSnap to center of element

snap-endscroll-snap-align: endSnap to end of element

snap-align-nonescroll-snap-align: noneDisable snapping on this element

accent-autoaccent-color: autoBrowser default accent color

accent-inheritaccent-color: inheritInherit accent color from parent

accent-currentaccent-color: currentColorUse text color as accent

accent-blue-500accent-color: #3b82f6Set accent color for form controls

Pseudo-Element Variants10 classes

before, after, placeholder, marker, selection, file, first-line, backdrop

before:{utility}&::before { … }Style the ::before pseudo-element

after:{utility}&::after { … }Style the ::after pseudo-element

placeholder:{utility}&::placeholder { … }Style input placeholder text

marker:{utility}&::marker { … }Style list item markers (bullets, numbers)

selection:{utility}&::selection { … }Style text selection highlight

file:{utility}&::file-selector-button { … }Style file input button

first-line:{utility}&::first-line { … }Style first line of text

first-letter:{utility}&::first-letter { … }Style first letter (drop caps)

backdrop:{utility}&::backdrop { … }Style the backdrop of dialogs/popovers

before:content-['']content: ''Set empty content (required for before/after)

CHANGED

Arbitrary Values & Modifiers18 classes

Bracket notation, CSS variables, data attributes, !important modifier, content utility

w-[137px]width: 137pxAny width via bracket notation

h-[50vh]height: 50vhViewport-relative height

bg-[#1da1f2]background-color: #1da1f2Any hex color as background

text-[#ff6347]color: #ff6347Any hex color as text

grid-cols-[200px_1fr]grid-template-columns: 200px 1frCustom grid column template

text-[17px]font-size: 17pxNon-standard font size

m-[7px]margin: 7pxAny margin value

p-[clamp(1rem,3vw,2rem)]padding: clamp(1rem, 3vw, 2rem)CSS clamp() for fluid padding

[mask-type:luminance]mask-type: luminanceAny CSS property via bracket syntax

[--my-color:red]--my-color: redSet CSS custom property inline

bg-[var(--brand)]background-color: var(--brand)Use a CSS variable for background

text-[var(--heading)]color: var(--heading)Use a CSS variable for text color

!font-boldfont-weight: 700 !importantForce important with ! prefix

!p-4padding: 1rem !importantImportant padding override

data-[active]:bg-green-500&[data-active] { background-color: … }Style based on data attribute

data-[size=lg]:text-xl&[data-size=lg] { font-size: 1.25rem }Style based on data attribute value

content-['']content: ''Empty content for pseudo-elements

content-[attr(data-tip)]content: attr(data-tip)Content from data attribute

Container Queries13 classes

@container, @sm:, @md:, @lg:, named containers (v4)

@containercontainer-type: inline-sizeMark element as a container query context

NEWv4.x

@container-normalcontainer-type: normalContainer with no size containment

NEWv4.x

@container/{name}container-name: {name}Named container for targeted queries

NEWv4.x

@sm:{utility}@container (min-width: 24rem)Apply when container ≥384px

NEWv4.x

@md:{utility}@container (min-width: 28rem)Apply when container ≥448px

NEWv4.x

@lg:{utility}@container (min-width: 32rem)Apply when container ≥512px

NEWv4.x

@xl:{utility}@container (min-width: 36rem)Apply when container ≥576px

NEWv4.x

@2xl:{utility}@container (min-width: 42rem)Apply when container ≥672px

NEWv4.x

@3xl:{utility}@container (min-width: 48rem)Apply when container ≥768px

NEWv4.x

@4xl:{utility}@container (min-width: 56rem)Apply when container ≥896px

NEWv4.x

@5xl:{utility}@container (min-width: 64rem)Apply when container ≥1024px

NEWv4.x

@max-sm:{utility}@container (max-width: 23.9375rem)Apply when container <384px

NEWv4.x

@max-md:{utility}@container (max-width: 27.9375rem)Apply when container <448px

NEWv4.x

Logical Properties31 classes

Inline/block direction utilities for internationalization — ms, me, ps, pe, start, end (v4)

ms-0margin-inline-start: 0Start margin 0 (left in LTR, right in RTL)

NEWv4.x

ms-1margin-inline-start: 0.25remStart margin 4px

NEWv4.x

ms-2margin-inline-start: 0.5remStart margin 8px

NEWv4.x

ms-4margin-inline-start: 1remStart margin 16px

NEWv4.x

ms-automargin-inline-start: autoAuto start margin

NEWv4.x

me-0margin-inline-end: 0End margin 0 (right in LTR, left in RTL)

NEWv4.x

me-1margin-inline-end: 0.25remEnd margin 4px

NEWv4.x

me-2margin-inline-end: 0.5remEnd margin 8px

NEWv4.x

me-4margin-inline-end: 1remEnd margin 16px

NEWv4.x

me-automargin-inline-end: autoAuto end margin

NEWv4.x

ps-0padding-inline-start: 0Start padding 0

NEWv4.x

ps-1padding-inline-start: 0.25remStart padding 4px

NEWv4.x

ps-2padding-inline-start: 0.5remStart padding 8px

NEWv4.x

ps-4padding-inline-start: 1remStart padding 16px

NEWv4.x

pe-0padding-inline-end: 0End padding 0

NEWv4.x

pe-1padding-inline-end: 0.25remEnd padding 4px

NEWv4.x

pe-2padding-inline-end: 0.5remEnd padding 8px

NEWv4.x

pe-4padding-inline-end: 1remEnd padding 16px

NEWv4.x

inset-x-0inset-inline: 0Left and right 0 (logical)

NEWv4.x

start-0inset-inline-start: 0Start position 0 (logical)

NEWv4.x

end-0inset-inline-end: 0End position 0 (logical)

NEWv4.x

text-starttext-align: startLogical start text alignment

NEWv4.x

text-endtext-align: endLogical end text alignment

NEWv4.x

border-s-0border-inline-start-width: 0No start border

NEWv4.x

border-sborder-inline-start-width: 1px1px start border

NEWv4.x

border-e-0border-inline-end-width: 0No end border

NEWv4.x

border-eborder-inline-end-width: 1px1px end border

NEWv4.x

rounded-ss-mdborder-start-start-radius: 0.375remRound start-start corner

NEWv4.x

rounded-se-mdborder-start-end-radius: 0.375remRound start-end corner

NEWv4.x

rounded-es-mdborder-end-start-radius: 0.375remRound end-start corner

NEWv4.x

rounded-ee-mdborder-end-end-radius: 0.375remRound end-end corner

NEWv4.x

Frequently Asked Questions

Common questions about Tailwind CSS utility classes, versions, and usage.

Related Tools

More developer tools from ToolFox — explore layouts, colors, and more.

CSS Grid GeneratorVisual CSS Grid builder with code export.Flexbox PlaygroundInteractive flexbox property explorer.Color ConverterConvert between HEX, RGB, HSL, and OKLCH.