{}JSJSON

Tailwind CSS Reference

Quick reference for common Tailwind CSS utility classes with search, filter, and copy-to-clipboard

Responsive Prefixes:sm ≥640pxmd ≥768pxlg ≥1024pxxl ≥1280px2xl ≥1536px|Dark Mode:dark:
▼Layout28 classes
ClassCSS EquivalentDescriptionAction
blockdisplay: block;Block-level element
inline-blockdisplay: inline-block;Inline-block element
inlinedisplay: inline;Inline element
flexdisplay: flex;Flexbox container
inline-flexdisplay: inline-flex;Inline flexbox
griddisplay: grid;Grid container
inline-griddisplay: inline-grid;Inline grid
hiddendisplay: none;Hide element
containermax-width: 100%; @media(min-width) { max-width: ... }Responsive container
float-leftfloat: left;Float left
float-rightfloat: right;Float right
clearfixclear: both;Clear floats
overflow-autooverflow: auto;Auto overflow scroll
overflow-hiddenoverflow: hidden;Hide overflow
overflow-scrolloverflow: scroll;Always show scrollbar
overflow-visibleoverflow: visible;Overflow visible
relativeposition: relative;Relative positioning
absoluteposition: absolute;Absolute positioning
fixedposition: fixed;Fixed positioning
stickyposition: sticky;Sticky positioning
staticposition: static;Static positioning (default)
inset-0top: 0; right: 0; bottom: 0; left: 0;All sides set to 0
top-0top: 0px;Top offset 0
right-0right: 0px;Right offset 0
bottom-0bottom: 0px;Bottom offset 0
left-0left: 0px;Left offset 0
z-10z-index: 10;Z-index 10
z-50z-index: 50;Z-index 50
▼Flexbox29 classes
ClassCSS EquivalentDescriptionAction
flex-rowflex-direction: row;Horizontal layout (default)
flex-row-reverseflex-direction: row-reverse;Horizontal reversed
flex-colflex-direction: column;Vertical layout
flex-col-reverseflex-direction: column-reverse;Vertical reversed
flex-wrapflex-wrap: wrap;Allow wrapping
flex-nowrapflex-wrap: nowrap;No wrapping
flex-1flex: 1 1 0%;Equal flex grow
flex-autoflex: 1 1 auto;Flex based on content
flex-noneflex: none;No flex grow/shrink
flex-growflex-grow: 1;Allow growing
flex-shrinkflex-shrink: 1;Allow shrinking
flex-shrink-0flex-shrink: 0;Prevent shrinking
justify-startjustify-content: flex-start;Justify start
justify-centerjustify-content: center;Justify center
justify-endjustify-content: flex-end;Justify end
justify-betweenjustify-content: space-between;Justify space-between
justify-aroundjustify-content: space-around;Justify space-around
justify-evenlyjustify-content: space-evenly;Justify space-evenly
items-startalign-items: flex-start;Items start
items-centeralign-items: center;Items center
items-endalign-items: flex-end;Items end
items-stretchalign-items: stretch;Items stretch
items-baselinealign-items: baseline;Items baseline
self-startalign-self: flex-start;Self start
self-centeralign-self: center;Self center
self-endalign-self: flex-end;Self end
gap-4gap: 1rem;Gap 1rem
gap-x-4column-gap: 1rem;Column gap 1rem
gap-y-4row-gap: 1rem;Row gap 1rem
▼Grid14 classes
ClassCSS EquivalentDescriptionAction
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));1 column grid
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));2 column grid
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));3 column grid
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));4 column grid
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));6 column grid
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));12 column grid
grid-cols-nonegrid-template-columns: none;No explicit columns
col-span-2grid-column: span 2 / span 2;Span 2 columns
col-span-fullgrid-column: 1 / -1;Span full row
col-start-1grid-column-start: 1;Start at column 1
row-span-2grid-row: span 2 / span 2;Span 2 rows
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));2 row grid
auto-cols-frgrid-auto-columns: minmax(0, 1fr);Auto columns fill
auto-rows-frgrid-auto-rows: minmax(0, 1fr);Auto rows fill
▼Spacing26 classes
ClassCSS EquivalentDescriptionAction
m-0margin: 0px;Margin 0
m-1margin: 0.25rem;Margin 0.25rem
m-2margin: 0.5rem;Margin 0.5rem
m-4margin: 1rem;Margin 1rem
m-automargin: auto;Auto margin (center)
mx-automargin-left: auto; margin-right: auto;Horizontal center
mx-4margin-left: 1rem; margin-right: 1rem;Horizontal margin 1rem
my-4margin-top: 1rem; margin-bottom: 1rem;Vertical margin 1rem
mt-4margin-top: 1rem;Margin top 1rem
mr-4margin-right: 1rem;Margin right 1rem
mb-4margin-bottom: 1rem;Margin bottom 1rem
ml-4margin-left: 1rem;Margin left 1rem
-m-4margin: -1rem;Negative margin -1rem
p-0padding: 0px;Padding 0
p-1padding: 0.25rem;Padding 0.25rem
p-2padding: 0.5rem;Padding 0.5rem
p-4padding: 1rem;Padding 1rem
px-4padding-left: 1rem; padding-right: 1rem;Horizontal padding 1rem
py-4padding-top: 1rem; padding-bottom: 1rem;Vertical padding 1rem
pt-4padding-top: 1rem;Padding top 1rem
pr-4padding-right: 1rem;Padding right 1rem
pb-4padding-bottom: 1rem;Padding bottom 1rem
pl-4padding-left: 1rem;Padding left 1rem
space-x-4> * + * { margin-left: 1rem; }Child horizontal spacing 1rem
space-y-4> * + * { margin-top: 1rem; }Child vertical spacing 1rem
space-x-reversedirection: rtl;Reverse horizontal spacing direction
▼Sizing33 classes
ClassCSS EquivalentDescriptionAction
w-0width: 0px;Width 0
w-1width: 0.25rem;Width 0.25rem
w-4width: 1rem;Width 1rem
w-1/2width: 50%;Width 50%
w-1/3width: 33.333%;Width 33.3%
w-2/3width: 66.667%;Width 66.7%
w-fullwidth: 100%;Width 100%
w-screenwidth: 100vw;Viewport width
w-minwidth: min-content;Min-content width
w-maxwidth: max-content;Max-content width
w-fitwidth: fit-content;Fit-content width
w-autowidth: auto;Auto width
min-w-0min-width: 0px;Min width 0
min-w-fullmin-width: 100%;Min width 100%
max-w-xsmax-width: 20rem;Max width 20rem
max-w-smmax-width: 24rem;Max width 24rem
max-w-mdmax-width: 28rem;Max width 28rem
max-w-lgmax-width: 32rem;Max width 32rem
max-w-xlmax-width: 36rem;Max width 36rem
max-w-2xlmax-width: 42rem;Max width 42rem
max-w-fullmax-width: 100%;Max width 100%
max-w-nonemax-width: none;No max width limit
max-w-prosemax-width: 65ch;Max width 65 characters
h-0height: 0px;Height 0
h-4height: 1rem;Height 1rem
h-fullheight: 100%;Height 100%
h-screenheight: 100vh;Viewport height
h-autoheight: auto;Auto height
min-h-0min-height: 0px;Min height 0
min-h-fullmin-height: 100%;Min height 100%
min-h-screenmin-height: 100vh;Min viewport height
max-h-fullmax-height: 100%;Max height 100%
max-h-screenmax-height: 100vh;Max viewport height
▼Typography57 classes
ClassCSS EquivalentDescriptionAction
text-xsfont-size: 0.75rem; line-height: 1rem;Extra small text 12px
text-smfont-size: 0.875rem; line-height: 1.25rem;Small text 14px
text-basefont-size: 1rem; line-height: 1.5rem;Base text 16px
text-lgfont-size: 1.125rem; line-height: 1.75rem;Large text 18px
text-xlfont-size: 1.25rem; line-height: 1.75rem;Extra large text 20px
text-2xlfont-size: 1.5rem; line-height: 2rem;2x large text 24px
text-3xlfont-size: 1.875rem; line-height: 2.25rem;3x large text 30px
text-4xlfont-size: 2.25rem; line-height: 2.5rem;4x large text 36px
text-5xlfont-size: 3rem; line-height: 1;5x large text 48px
font-thinfont-weight: 100;Thin font weight
font-lightfont-weight: 300;Light font weight
font-normalfont-weight: 400;Normal font weight
font-mediumfont-weight: 500;Medium font weight
font-semiboldfont-weight: 600;Semibold font weight
font-boldfont-weight: 700;Bold font weight
font-extraboldfont-weight: 800;Extra bold font weight
font-blackfont-weight: 900;Black font weight
text-lefttext-align: left;Text align left
text-centertext-align: center;Text align center
text-righttext-align: right;Text align right
text-justifytext-align: justify;Text justify
leading-noneline-height: 1;Line height 1
leading-tightline-height: 1.25;Tight line height
leading-normalline-height: 1.5;Normal line height
leading-relaxedline-height: 1.625;Relaxed line height
leading-looseline-height: 2;Loose line height
tracking-tightletter-spacing: -0.025em;Tight letter spacing
tracking-normalletter-spacing: 0em;Normal letter spacing
tracking-wideletter-spacing: 0.025em;Wide letter spacing
tracking-widerletter-spacing: 0.05em;Wider letter spacing
tracking-widestletter-spacing: 0.1em;Widest letter spacing
uppercasetext-transform: uppercase;Uppercase transform
lowercasetext-transform: lowercase;Lowercase transform
capitalizetext-transform: capitalize;Capitalize transform
normal-casetext-transform: none;No transform
underlinetext-decoration-line: underline;Underline
overlinetext-decoration-line: overline;Overline
line-throughtext-decoration-line: line-through;Line-through
no-underlinetext-decoration-line: none;No underline
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;Single-line truncate
text-ellipsistext-overflow: ellipsis;Text ellipsis
text-cliptext-overflow: clip;Text clip
break-normaloverflow-wrap: normal; word-break: normal;Normal word break
break-wordsoverflow-wrap: break-word;Break words
break-allword-break: break-all;Break at any character
whitespace-normalwhite-space: normal;Normal whitespace
whitespace-nowrapwhite-space: nowrap;No wrap
whitespace-prewhite-space: pre;Preserve whitespace
whitespace-pre-wrapwhite-space: pre-wrap;Preserve and wrap
italicfont-style: italic;Italic style
not-italicfont-style: normal;Not italic
list-nonelist-style-type: none;No list markers
list-disclist-style-type: disc;Disc list markers
list-decimallist-style-type: decimal;Decimal list markers
list-insidelist-style-position: inside;List markers inside
list-outsidelist-style-position: outside;List markers outside
placeholder-gray-400::placeholder { color: #9ca3af; }Placeholder color
▼Backgrounds32 classes
ClassCSS EquivalentDescriptionAction
bg-transparentbackground-color: transparent;Transparent background
bg-blackbackground-color: #000;Black background
bg-whitebackground-color: #fff;White background
bg-gray-100background-color: #f3f4f6;Light gray background
bg-gray-200background-color: #e5e7eb;Gray background
bg-gray-500background-color: #6b7280;Medium gray background
bg-gray-800background-color: #1f2937;Dark gray background
bg-gray-900background-color: #111827;Very dark gray background
bg-red-500background-color: #ef4444;Red background
bg-blue-500background-color: #3b82f6;Blue background
bg-green-500background-color: #22c55e;Green background
bg-yellow-500background-color: #eab308;Yellow background
bg-purple-500background-color: #a855f7;Purple background
bg-indigo-500background-color: #6366f1;Indigo background
bg-pink-500background-color: #ec4899;Pink background
bg-opacity-50--tw-bg-opacity: 0.5;Background opacity 50%
bg-coverbackground-size: cover;Cover background
bg-containbackground-size: contain;Contain background
bg-centerbackground-position: center;Center background
bg-topbackground-position: top;Top background
bg-bottombackground-position: bottom;Bottom background
bg-no-repeatbackground-repeat: no-repeat;No repeat background
bg-repeatbackground-repeat: repeat;Repeat background
bg-fixedbackground-attachment: fixed;Fixed background
bg-localbackground-attachment: local;Scroll with content
bg-scrollbackground-attachment: scroll;Scroll with container
bg-gradient-to-rbackground-image: linear-gradient(to right, ...);Gradient to right
bg-gradient-to-bbackground-image: linear-gradient(to bottom, ...);Gradient to bottom
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, ...);Gradient to bottom-right
from-blue-500--tw-gradient-from: #3b82f6;Gradient from color
to-purple-500--tw-gradient-to: #a855f7;Gradient to color
via-green-500--tw-gradient-stops: ..., #22c55e, ...;Gradient via color
▼Borders35 classes
ClassCSS EquivalentDescriptionAction
borderborder-width: 1px;1px border
border-0border-width: 0px;No border
border-2border-width: 2px;2px border
border-4border-width: 4px;4px border
border-tborder-top-width: 1px;Top border
border-rborder-right-width: 1px;Right border
border-bborder-bottom-width: 1px;Bottom border
border-lborder-left-width: 1px;Left border
border-solidborder-style: solid;Solid border
border-dashedborder-style: dashed;Dashed border
border-dottedborder-style: dotted;Dotted border
border-doubleborder-style: double;Double border
border-noneborder-style: none;No border style
border-gray-200border-color: #e5e7eb;Light gray border
border-gray-300border-color: #d1d5db;Gray border
border-gray-800border-color: #1f2937;Dark gray border
border-blue-500border-color: #3b82f6;Blue border
border-red-500border-color: #ef4444;Red border
border-transparentborder-color: transparent;Transparent border
rounded-noneborder-radius: 0px;No border radius
rounded-smborder-radius: 0.125rem;Small border radius
roundedborder-radius: 0.25rem;Default border radius
rounded-mdborder-radius: 0.375rem;Medium border radius
rounded-lgborder-radius: 0.5rem;Large border radius
rounded-xlborder-radius: 0.75rem;Extra large radius
rounded-2xlborder-radius: 1rem;2x large radius
rounded-fullborder-radius: 9999px;Full round (circle)
rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;Top large radius
rounded-b-lgborder-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;Bottom large radius
ring-1box-shadow: 0 0 0 1px var(--tw-ring-color);1px ring
ring-2box-shadow: 0 0 0 2px var(--tw-ring-color);2px ring
ring-blue-500--tw-ring-color: #3b82f6;Blue ring
divide-x> * + * { border-left-width: 1px; }Vertical dividers
divide-y> * + * { border-top-width: 1px; }Horizontal dividers
divide-gray-200> * + * { border-color: #e5e7eb; }Gray dividers
▼Effects19 classes
ClassCSS EquivalentDescriptionAction
shadow-smbox-shadow: 0 1px 2px rgba(0,0,0,0.05);Small shadow
shadowbox-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);Default shadow
shadow-mdbox-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);Medium shadow
shadow-lgbox-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);Large shadow
shadow-xlbox-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);Extra large shadow
shadow-2xlbox-shadow: 0 25px 50px rgba(0,0,0,0.25);2x large shadow
shadow-innerbox-shadow: inset 0 2px 4px rgba(0,0,0,0.06);Inner shadow
shadow-nonebox-shadow: 0 0 #0000;No shadow
shadow-blue-500/50box-shadow: ... rgba(59,130,246,0.5);Blue shadow
opacity-0opacity: 0;Fully transparent
opacity-5opacity: 0.05;5% opacity
opacity-10opacity: 0.1;10% opacity
opacity-25opacity: 0.25;25% opacity
opacity-50opacity: 0.5;50% opacity
opacity-75opacity: 0.75;75% opacity
opacity-100opacity: 1;Fully opaque
mix-blend-multiplymix-blend-mode: multiply;Multiply blend
mix-blend-screenmix-blend-mode: screen;Screen blend
mix-blend-overlaymix-blend-mode: overlay;Overlay blend
▼Filters39 classes
ClassCSS EquivalentDescriptionAction
blur-nonefilter: blur(0);No blur
blur-smfilter: blur(4px);Small blur
blurfilter: blur(8px);Default blur
blur-mdfilter: blur(12px);Medium blur
blur-lgfilter: blur(16px);Large blur
blur-xlfilter: blur(24px);Extra large blur
blur-2xlfilter: blur(40px);2x blur
blur-3xlfilter: blur(64px);3x blur
brightness-0filter: brightness(0);Brightness 0 (black)
brightness-50filter: brightness(0.5);Brightness 50%
brightness-100filter: brightness(1);Normal brightness
brightness-125filter: brightness(1.25);Brightness 125%
brightness-150filter: brightness(1.5);Brightness 150%
brightness-200filter: brightness(2);Brightness 200%
contrast-50filter: contrast(0.5);Contrast 50%
contrast-100filter: contrast(1);Normal contrast
contrast-150filter: contrast(1.5);Contrast 150%
grayscale-0filter: grayscale(0);No grayscale
grayscalefilter: grayscale(100%);Full grayscale
invert-0filter: invert(0);No invert
invertfilter: invert(100%);Invert colors
sepia-0filter: sepia(0);No sepia
sepiafilter: sepia(100%);Full sepia
saturate-50filter: saturate(0.5);Saturation 50%
saturate-100filter: saturate(1);Normal saturation
saturate-150filter: saturate(1.5);Saturation 150%
saturate-200filter: saturate(2);Saturation 200%
hue-rotate-0filter: hue-rotate(0deg);Hue rotate 0°
hue-rotate-90filter: hue-rotate(90deg);Hue rotate 90°
hue-rotate-180filter: hue-rotate(180deg);Hue rotate 180°
drop-shadow-smfilter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));Small drop shadow
drop-shadowfilter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) drop-shadow(0 1px 1px rgba(0,0,0,0.06));Default drop shadow
drop-shadow-mdfilter: drop-shadow(0 4px 3px rgba(0,0,0,0.1)) drop-shadow(0 2px 2px rgba(0,0,0,0.06));Medium drop shadow
drop-shadow-lgfilter: drop-shadow(0 10px 8px rgba(0,0,0,0.1)) drop-shadow(0 4px 3px rgba(0,0,0,0.08));Large drop shadow
backdrop-blur-smbackdrop-filter: blur(4px);Small backdrop blur
backdrop-blurbackdrop-filter: blur(8px);Default backdrop blur
backdrop-blur-mdbackdrop-filter: blur(12px);Medium backdrop blur
backdrop-blur-lgbackdrop-filter: blur(16px);Large backdrop blur
backdrop-blur-xlbackdrop-filter: blur(24px);Extra large backdrop blur
▼Transitions30 classes
ClassCSS EquivalentDescriptionAction
transition-nonetransition-property: none;No transition
transition-alltransition-property: all;Transition all properties
transitiontransition-property: color, background-color, border-color, opacity, box-shadow, transform;Default transition
transition-colorstransition-property: color, background-color, border-color;Color transition
transition-opacitytransition-property: opacity;Opacity transition
transition-shadowtransition-property: box-shadow;Shadow transition
transition-transformtransition-property: transform;Transform transition
duration-75transition-duration: 75ms;Duration 75ms
duration-100transition-duration: 100ms;Duration 100ms
duration-150transition-duration: 150ms;Duration 150ms
duration-200transition-duration: 200ms;Duration 200ms
duration-300transition-duration: 300ms;Duration 300ms
duration-500transition-duration: 500ms;Duration 500ms
duration-700transition-duration: 700ms;Duration 700ms
duration-1000transition-duration: 1000ms;Duration 1000ms
ease-lineartransition-timing-function: linear;Linear easing
ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1);Ease in
ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1);Ease out
ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);Ease in-out
delay-75transition-delay: 75ms;Delay 75ms
delay-100transition-delay: 100ms;Delay 100ms
delay-150transition-delay: 150ms;Delay 150ms
delay-300transition-delay: 300ms;Delay 300ms
delay-500transition-delay: 500ms;Delay 500ms
delay-700transition-delay: 700ms;Delay 700ms
animate-noneanimation: none;No animation
animate-spinanimation: spin 1s linear infinite;Spin animation
animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;Ping animation
animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;Pulse animation
animate-bounceanimation: bounce 1s infinite;Bounce animation
▼Transforms41 classes
ClassCSS EquivalentDescriptionAction
scale-0transform: scale(0);Scale 0
scale-50transform: scale(0.5);Scale 50%
scale-75transform: scale(0.75);Scale 75%
scale-90transform: scale(0.9);Scale 90%
scale-95transform: scale(0.95);Scale 95%
scale-100transform: scale(1);Original size
scale-105transform: scale(1.05);Scale 105%
scale-110transform: scale(1.1);Scale 110%
scale-125transform: scale(1.25);Scale 125%
scale-150transform: scale(1.5);Scale 150%
scale-x-100transform: scaleX(1);Horizontal scale 100%
scale-y-100transform: scaleY(1);Vertical scale 100%
rotate-0transform: rotate(0deg);Rotate 0°
rotate-1transform: rotate(1deg);Rotate 1°
rotate-3transform: rotate(3deg);Rotate 3°
rotate-6transform: rotate(6deg);Rotate 6°
rotate-12transform: rotate(12deg);Rotate 12°
rotate-45transform: rotate(45deg);Rotate 45°
rotate-90transform: rotate(90deg);Rotate 90°
rotate-180transform: rotate(180deg);Rotate 180°
-rotate-45transform: rotate(-45deg);Rotate -45°
-rotate-90transform: rotate(-90deg);Rotate -90°
translate-x-0transform: translateX(0);Translate X 0
translate-x-1transform: translateX(0.25rem);Translate X 0.25rem
translate-x-4transform: translateX(1rem);Translate X 1rem
translate-x-fulltransform: translateX(100%);Translate X 100%
translate-x-1/2transform: translateX(50%);Translate X 50%
-translate-x-fulltransform: translateX(-100%);Translate X -100%
translate-y-0transform: translateY(0);Translate Y 0
translate-y-1transform: translateY(0.25rem);Translate Y 0.25rem
translate-y-4transform: translateY(1rem);Translate Y 1rem
translate-y-fulltransform: translateY(100%);Translate Y 100%
-translate-y-fulltransform: translateY(-100%);Translate Y -100%
skew-x-3transform: skewX(3deg);Skew X 3°
skew-x-6transform: skewX(6deg);Skew X 6°
skew-y-3transform: skewY(3deg);Skew Y 3°
skew-y-6transform: skewY(6deg);Skew Y 6°
origin-centertransform-origin: center;Transform origin center
origin-toptransform-origin: top;Transform origin top
origin-top-righttransform-origin: top right;Transform origin top-right
origin-bottom-lefttransform-origin: bottom left;Transform origin bottom-left
▼Interactivity29 classes
ClassCSS EquivalentDescriptionAction
cursor-autocursor: auto;Auto cursor
cursor-defaultcursor: default;Default cursor
cursor-pointercursor: pointer;Pointer cursor
cursor-waitcursor: wait;Wait cursor
cursor-textcursor: text;Text cursor
cursor-movecursor: move;Move cursor
cursor-not-allowedcursor: not-allowed;Not-allowed cursor
cursor-grabcursor: grab;Grab cursor
cursor-grabbingcursor: grabbing;Grabbing cursor
pointer-events-nonepointer-events: none;Disable pointer events
pointer-events-autopointer-events: auto;Enable pointer events
resize-noneresize: none;Disable resize
resizeresize: both;Resize both
resize-xresize: horizontal;Resize horizontal
resize-yresize: vertical;Resize vertical
select-noneuser-select: none;Disable text selection
select-textuser-select: text;Allow text selection
select-alluser-select: all;Select all on click
select-autouser-select: auto;Auto selection
scroll-autoscroll-behavior: auto;Auto scroll
scroll-smoothscroll-behavior: smooth;Smooth scroll
snap-startscroll-snap-align: start;Snap to start
snap-centerscroll-snap-align: center;Snap to center
snap-endscroll-snap-align: end;Snap to end
snap-mandatoryscroll-snap-type: ... mandatory;Mandatory snap
snap-proximityscroll-snap-type: ... proximity;Proximity snap
touch-autotouch-action: auto;Auto touch behavior
touch-nonetouch-action: none;Disable touch
touch-manipulationtouch-action: manipulation;Touch manipulation
▼SVG7 classes
ClassCSS EquivalentDescriptionAction
fill-currentfill: currentColor;Fill current color
fill-nonefill: none;No fill
fill-red-500fill: #ef4444;Red fill
stroke-currentstroke: currentColor;Stroke current color
stroke-nonestroke: none;No stroke
stroke-1stroke-width: 1;Stroke width 1
stroke-2stroke-width: 2;Stroke width 2
▼Accessibility4 classes
ClassCSS EquivalentDescriptionAction
sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;Screen reader only
not-sr-onlyposition: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto;Not screen reader only
forced-color-adjust-autoforced-color-adjust: auto;Auto forced color
forced-color-adjust-noneforced-color-adjust: none;Disable forced color

Tailwind CSS Quick Reference Guide

Features

  • Browse by Category — quickly find classes by layout, flexbox, spacing, etc.
  • Keyword Search — filter by class name or CSS property
  • Click to Copy — one-click copy class names to clipboard
  • CSS Mapping — see the CSS equivalent for each class

Usage Tips

  • Responsive prefixes: sm: md: lg: xl: 2xl:
  • Dark mode prefix: dark:, e.g. dark:bg-gray-900
  • State prefixes: hover: focus: active: disabled:
  • Combine: <div class="md:flex dark:bg-gray-900 hover:shadow-lg">

常见问题

相关工具

▦CSS Grid Generator↔CSS Flexbox Generator❐Box Shadow Generator🌈CSS Gradient Generator⬡Border Radius Generator▶CSS Animation Generator