Tailwind CSS 3 cheatsheet
Table of Contents
1. Colors
Slate, Gray, Zinc, Netural, Stone, Red, Orange, Amber, Yellow, lime Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuschia Ping, Rose.
2. Modifiers
2.1. Pseudo Classes
hover, focus, focus-within, focus-visible, active, visited, target, first, last, only, odd, even, first-of-type, last-of-type, only-of-type, empty, disabled, checked, indeterminate, default, required, valid, invalid, in-range, out-of-range, placeholder-shown, autofill, read-only.
2.2. Media Queries
sm, md, lg, xl, 2xl, dark, motion-reduce, motion-safe, portrait, landscape, print.
2.3. Attribute Selectors
rtl, ltr, open.
3. Functions and Directives
theme(), screen(), @tailwind, @layer, @apply.
4. Utility Classess
4.1. Layout
| Css term | Tw |
|---|---|
| Aspec Ratio | aspect-auto, aspect-square, aspect-video |
| Container | container |
| Columns | columns-{1-12, auto, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl}}, gap-{0-16}, gap-{20-96/4}, gap-x-{0-16}, gap-x-{20-96/4}, gap-y-{0-16}, gap-y-{20-96/4} |
| Break | break-after-{auto, avoid, all, avoid-page, page, left, right, column}, break-before-{auto, avoid, all, avoid-page, page, left, right, column}, break-inside-{auto, avoid, avoid-page, avoid-column} |
| Box Sizing | box-decoration-{clone, slice}, box-{border, content} |
| Display | block, inline-block, inline, flex, inline-flex, table, inline-table, table-{caption, cell, column, column-group, footer-group, header-group, row-group, row}, flow-root, grid, inline-grid, contents, list-item, hidden |
| Floats | float-{right, left, none} |
| Clears | clear-{left, right, both, none} |
| Isolation | isolate, isolation-auto |
| Object Fit | object-{contain, cover, fill, none, scale-down} |
| Object Position | object-{bottom, center, left, left-bottom, left-top, right, right-bottom, right-top, top} |
| Overflow | overflow-{auto, hidden, clip, visible, scroll, x-auto, y-auto, x-hidden, y-hidden, x-clip, y-clip, x-visible, y-visible, x-scroll, y-scroll} |
| Overscroll Behavior | overscroll-{auto, contain, none, y-{auto, contain, none}, x-{auto, contain, none}} |
| Position | static, fixed, absolute, relative, sticky |
| Top/Right/Bottom/Left | inset-0, inset-{x, y}-0, {top, right, bottom, left}-0, inset-{x, y}-px, {top, right, bottom, left}-px, inset-{x, y}-{0.5, 1, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 8, 10, 11, 12, …}, {top, right, bottom, left}-{0,5, 1, 2, …}, …{auto, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, full, auto} |
| Visibility | visible, invisible |
| Z-Index | z-{0, 10, 20, 30, 40, 50, auto} |
4.2. Flexbox & Grid
| Css Term | Tw |
|---|---|
| Flex Basis | basis-{full, auto, px, 0, 0.5, 1, 2, …, 1/2, 1/3, … 11/12} |
| Flex Direction | flex-{row, col}-{, reverse} |
| Flex Wrap | flex-{wrap, wrap-reverse, nowrap} |
| Flex | flex-{1, auto, initial, none} |
| Flex Grow | grow-{, 0} |
| Flex Shrink | shrink-{, 0} |
| Order | order-{1-12, first, last, none} |
| Grid Template Columns | grid-cols-{1-12, none} |
| Grid Column Start/End | col-{auto, {span, start, end}-{1-12, full}} |
| Grid Template Rows | grid-rows-{1-6, none} |
| Grid Row Start/End | row-{auto, {span, start, end}-{1-6, 7, full, auto}} |
| Grid Auto Flow | grid-flow-{row, col, row-dense, col-dense} |
| Grid Auto Columns | auto-cols-{auto, min, max, fr} |
| Grid Auto Rows | auto-rows-{auto, min, max, fr} |
| Gap | gap-{, x, y}-{0, px, 0.5, 1, 1.5, 2, …} |
| Justify Content | justify-{start, end, center, between, around, evenly} |
| Justify Items | justify-items-{start, end, center, stretch} |
| Justify Self | justify-self-{auto, start, end, center, stretch} |
| Align Content | content-{center, start, end, between, around, evenly} |
| Align Items | items-{start, end, center, baseline, stretch} |
| Align Self | self-{auto, start, end, center, stretch, baseline} |
| Place Content | place-content-{center, start, end, between, around, evenly, stretch} |
| Place Items | place-items-{start, end, center, stretch} |
| Place Self | place-selft-{auto, start, end, center, stretch} |
4.3. Spacing
| Css Term | Tw |
|---|---|
| Padding | p-{, x, y, t, r, b, l}-{0, px, 0.5, 1, 1.5, 2, …} |
| Margin | m-{, x, y, t, r, b, l}-{0, px, 0.5, 1, 1.5, 2, …} |
| Space Between | space-{x, y}-{0, px, 0.5, 1, 1.5, 2, …} |
4.4. Sizing
| Css Term | Tw |
|---|---|
| Width | w-{0, px, 0.5, 1, 1.5, 2, …} |
| Min-Width | min-w-{0, full, min, max, fit} |
| Max-Width | max-w-{0, none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full, min, max, fit, prose, screen-sm, screen-md} |
| Height | h-{0, px, 0.5, 1, 1.5, 2, …} |
| Min-Height | min-h-{0, full, screen, min, max, fit} |
| Max-Height | max-h-{0, px, 0.5, 1, 1.5, 2, …, full, screen, min, max, fit} |
4.5. Typography
| Css Term | Tw |
|---|---|
| Font Family | font-{sans, serif, mono} |
| Font Size | text-{xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl} |
| Font Smoothing | antialiased, subpixel-antialiased |
| Font Style | italic, not-italic |
| Font Weight | font-{thin, extralight, light, normal, medium, semibold, bold, extrabold, black |
| Font Variant Numeric | normal-nums, ordinal, slashed-zero, {lining, oldstyle, proportional, tabular}-nums, {diagonal, stacked}-fractions |
| Letter Spacing | tracking-{tighter, tight, normal, wide, wider, widest} |
| Line Height | leading-{3-10, none, tight, snug, normal, relaxed, loose} |
| List Style Type | list-{none, disc, decimal} |
| List Style Position | list-{inside, outside} |
| Text Align | text-{left, center, right, justify} |
| Text Color | text-{inherit, current, transparent, black, white, slate-50…} |
| Text Decoration | underline, overline, line-throug, no-underline |
| Text Decoration Color | decoration-{inherit, current, transparent, black, white, slate-50…} |
| Text Decoration Style | decoration-{solid, double, dotted, dashed, wavy} |
| Text Decoration Thinkness | docoration-{auto, from-font, 0, 1, 2, 4, 8} |
| Text Underline Offset | underline-offset-{auto, 0, 1, 2, 4, 8} |
| Text Transforms | uppercase, lowercase, capitalize, normal-case |
| Text Overflow | truncate, text-ellipsis, text-clip |
| Text Indent | indent-{0, px, 0.5, 1, 1.5, 2, …} |
| Vertical Align | align-{baseline, top, middle, bottom, text-top, text-bottom, sub, super} |
| Whitespace | whitespace-{normal, nowrap, pre, pre-line, pre-wrap} |
| Word Break | break-{normal, words, all} |
| Content | content-none |
4.6. Background
| Css Term | Tw |
|---|---|
| Background Attachment | bg-{fixed, local, scroll} |
| Background Clip | bg-clip-{border, padding, content, text} |
| Background Color | bg-{inherit, current, transparent, black, white, slate-50…} |
| Background Origin | bg-origin-{border, padding, content} |
| Background Position | bg-{center, top, bottom, left, bottom-right, …} |
| Background Repeat | bg-repeat-{, x, y, round, space}, bg-no-repeat |
| Background Size | bg-{auto, cover, contain} |
| Background Image | bg-none, bg-gradient-to-{t, tr, r, br, b, bl, l, tl} |
| Gradient Color Stops | from-{inherit, current, transparent, black, white, slate-50…} |
4.7. Borders
| Css Term | Tw |
|---|---|
| Border Radius | rounded-{, none, sm, md, lg, xl, 2xl, 3xl, full, {t, r, b, l}-{, sm, md, …}} |
| Border Width | border-{, 0, 2, 4, 8, {x, y, t, r, b, l}-{, 0, 2, 4, 8}} |
| Border Color | border-{inherit, current, transparent, black, white, slate-50…} |
| Border Style | border-{solid, dashed, dotted, double, hidden, none} |
| Divide Width | divide-{x, y}-{0, 2, 4, 8, reverse} |
| Divide Color | divide-{inherit, current, transparent, black, white, slate-50…} |
| Divide Style | divide-{solid, dashed, dotted, double, hidden, none} |
| Outline Width | outline-{0, 1, 2, 4, 8} |
| Outline Color | outline-{inherit, current, transparent, black, white, slate-50…} |
| Outline Style | outline-{solid, dashed, dotted, double, hidden, none} |
| Outline Offset | outline-offset-{0, 1, 2, 4, 8} |
| Ring Width | ring={, 0, 1, 2, 4, 8, inset} |
| Ring Color | ring-{inherit, current, transparent, black, white, slate-50…} |
| Ring Offset Width | ring-offset-{0, 1, 2, 4, 8} |
| Ring Offset Color | ring-offset-{inherit, current, transparent, black, white, slate-50…} |
4.8. Effects
| Css Term | Tw |
|---|---|
| Box Shadow | shadow-{, sm, md, lg, xl, 2xl, inner, none} |
| Box Shadow Color | shadow-{inherit, current, transparent, black, white, slate-50…} |
| Opacity | opacity-{0, 5, 10, 20, 25, 30, 40, 50, 60, 70. 75, 80, 90, 92, 100} |
| Mix Blend Mode | mix-blend-{normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color} |
| Background Blend Mode | bg-blend-{normal, multiply, screen, …} |
4.9. Filters
| Css Term | Tw |
|---|---|
| Blur | blur-{, none, sm, md, lg, xl, 2xl, 3xl} |
| Brightness | brightness-{0, 50, 75, 90, 100, 105, 110, 125, 150, 200} |
| Contrast | contrast-{0, 50, 75, 100, 125, 150, 200} |
| Drop Shadow | drop-shadow-{, none, sm, md, lg, xl, 2xl} |
| Grayscale | grayscale-{, 0} |
| Hue Rotate | hue-rotate-{0, 15, 30, 60, 90, 180} |
| Invert | invert-{, 0} |
| Saturate | saturate-{0, 50, 100, 150, 200} |
| Sepia | sepia-{, 0} |
| Backdrop Blur | backdrop-blur-{, none, sm, md, lg, xl, 2xl} |
| Backdrop Brightness | backdrop-brightness-{0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200} |
| Backdrop Contrast | backdrop-contrast-{0, 50, 75, 100, 125, 150, 200} |
| Backdrop Greyscale | backdrop-grayscale-{, 0} |
| Backdrop Hue Rotate | backdrop-hue-rotate-{0, 15, 30, 60, 90, 180} |
| Backdrop Invert | backdrop-invert-{, 0} |
| Backdrop Opacity | backdrop-opacity-{0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100} |
| Backdrop Saturate | backdrop-saturate-{0, 50, 100, 150, 200} |
| Backdrop Sepia | backdrop-sepia-{, 0} |
4.10. Tables
| Css Term | Tw |
|---|---|
| Border Collapse | border-{collapse, separate} |
| Table Layout | table-{auto, fixed} |
4.11. Transitions & Animation
| Css Term | Tw |
|---|---|
| Transition Property | transition-{, none, all, colors, opacity, shadow, transform} |
| Transition Duration | duration-{75, 100, 150, 200, 300, 500, 700, 1000} |
| Transition Timing Functions | ease-{linear, in, out, in-out} |
| Transition Delay | delay-{75, 100, 150, 200, 300, 500, 700, 1000} |
| Animation | animate-{none, spin, ping, pulse, bounce, |
4.12. Transforms
| Css Term | Tw |
|---|---|
| Scale | scale-{, x, y}-{0, 50, 75, 90, 95, 100, 105, 110, 125, 150} |
| Rotate | rotate-{0, 1, 2, 3, 6, 12, 45, 90, 100} |
| Translate | translate-{x, y}-{px, 0.5, 1, 1.5, 2, 3, …} |
| Skew | skew-{x, y}-{0, 1, 2, 3, 6, 12} |
| Transform Origin | origin-{center, top, bottom, left, bottom-right, …} |
4.13. Interactivity
| Css Term | Tw |
|---|---|
| Accent Color | accent-{inherit, current, transparent, black, white, slate-50…} |
| Appearance | appearance-none |
| Cursor | cursor-{auto, default, pointer, wait, text, move, help, not-allowed, none, context-menu, progress, cell, crosshair, vertical-text, alias, copy, no-drop, grap, grabbing, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, nw-resize, se-resize, sw-resize, nesw-resize, nwse-resize, zoom-in, zoom-out |
| Caret Color | caret-{inherit, current, transparent, black, white, slate-50…} |
| Pointer Events | pointer-events-{none, auto} |
| Resize | resize-{none, y, x}, resize |
| Scroll Behavior | scroll-{auto, smooth} |
| Scroll Margin | scroll-{{mx, my, mt, mr, …}-{0, px, 0.5, 1, 2, 2.5, …}} |
| Scroll Padding | scroll-{{p, px, py, pt, pr, …}-{0, px, 0.5, 1, 2, 2.5, …}} |
| Scroll Snap Align | snap-{start, end, center, align-none} |
| Scroll Snap Stop | snap-{normal, always} |
| Scroll Snap Type | snap-{none, x, y, both, mandatory, proximity} |
| Touch Action | touch-{auto, none, pan-{x, left, right, y, up, down}, pinch-zoom, manipulation} |
| User Select | select-{none, text, all, auto} |
| Will Change | will-change-{auto, scroll, content, transform} |
4.14. SVG
| Css Term | Tw |
|---|---|
| Fill | fill-{inherit, current, transparent, black, white, slate-50…, gray-50…} |
| Stroke | stroke-{inherit, current, transparent, …} |
| Stroke Width | stroke-{0, 1, 2} |
4.15. Accessibility
| Css Term | Tw |
|---|---|
| Screen Readers | sr-only, not-sr-only |