fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMREFERENCE
← All resources

QUICK REFERENCE

Tailwind CSS at a glance.

The original reference collection. Follow the official documentation links for current syntax and support.

Layout

  • Aspect Ratio ↗aspect-auto, aspect-square, aspect-video
  • Container ↗container
  • Columns ↗columns-1, columns-2, columns-3, columns-4, columns-5, columns-6, columns-7, columns-8, columns-9, columns-10, columns-11, columns-12
  • Break After ↗break-after-auto, break-after-avoid, break-after-all, break-after-avoid-page, break-after-page
  • Break Before ↗break-before-auto, break-before-avoid, break-before-all, break-before-avoid-page, break-before-page
  • Break Inside ↗break-inside-auto, break-inside-avoid, break-inside-avoid-page, break-inside-avoid-column
  • Box Decoration Break ↗box-decoration-slice, box-decoration-clone
  • Box Sizing ↗box-border, box-content
  • Display ↗block, inline-block, inline, flex, inline-flex, table, inline-table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, hidden
  • Float ↗float-right, float-left, float-none
  • Clear ↗clear-left, clear-right, clear-both, clear-none
  • Isolation ↗isolate, isolate-auto
  • Object Fit ↗object-contain, object-cover, object-fill, object-none, object-scale-down
  • Object Position ↗object-bottom, object-center, object-left, object-left-bottom, object-left-top, object-right, object-right-bottom, object-right-top, object-top
  • Overflow ↗overflow-auto, overflow-hidden, overflow-visible, overflow-scroll, overflow-x-auto, overflow-y-auto, overflow-x-hidden, overflow-y-hidden, overflow-x-visible, overflow-y-visible, overflow-x-scroll, overflow-y-scroll
  • Overscroll Behavior ↗overscroll-auto, overscroll-contain, overscroll-none, overscroll-y-auto, overscroll-y-contain, overscroll-y-none, overscroll-x-auto, overscroll-x-contain, overscroll-x-none
  • Position ↗static, fixed, absolute, relative, sticky
  • Top / Right / Bottom / Left ↗top-0, top-1, ..., right-0, right-1, ..., bottom-0, bottom-1, ..., left-0, left-1, ...
  • Visibility ↗visible, invisible
  • Z-index ↗z-0, z-10, z-20, z-30, z-40, z-50, z-auto

Sizing

  • Width ↗w-0, w-1, w-2, ..., w-full, w-screen
  • Min Width ↗min-w-0, min-w-full, min-w-min, min-w-max, min-w-fit
  • Max Width ↗max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl, max-w-full
  • Height ↗h-0, h-1, h-2, ..., h-full, h-screen
  • Min Height ↗min-h-0, min-h-full, min-h-screen
  • Max Height ↗max-h-0, max-h-full, max-h-screen

Transforms

  • Scale ↗scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
  • Rotate ↗rotate-0, rotate-45, rotate-90, rotate-180, -rotate-45, -rotate-90, -rotate-180
  • Translate ↗translate-x-0, translate-x-1, ..., translate-y-0, translate-y-1, ...
  • Skew ↗skew-x-0, skew-x-12, skew-x-6, skew-y-0, skew-y-12, skew-y-6
  • Transform Origin ↗origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left

Effects

  • Box Shadow ↗shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none
  • Opacity ↗opacity-0, opacity-5, opacity-10, ..., opacity-100
  • Mix Blend Mode ↗mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity
  • Background Blend Mode ↗bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten, bg-blend-color-dodge, bg-blend-color-burn, bg-blend-hard-light, bg-blend-soft-light, bg-blend-difference, bg-blend-exclusion, bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity

Spacing

  • Padding ↗p-0, p-1, p-2, ..., p-64, p-px, px-0, py-0, pt-0, pr-0, pb-0, pl-0, etc.
  • Margin ↗m-0, m-1, m-2, ..., m-64, m-px, mx-0, my-0, mt-0, mr-0, mb-0, ml-0, etc.
  • Space Between ↗space-x-0, space-x-1, ..., space-x-64, space-y-0, space-y-1, ..., space-y-64

Typography

Interactivity

Filters

  • Blur ↗blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl
  • Brightness ↗brightness-0, brightness-50, brightness-75, brightness-90, brightness-95, brightness-100, brightness-105, brightness-110, brightness-125, brightness-150
  • Contrast ↗contrast-0, contrast-50, contrast-75, contrast-100, contrast-125, contrast-150
  • Drop Shadow ↗drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl, drop-shadow-none
  • Grayscale ↗grayscale, grayscale-0, grayscale
  • Hue Rotate ↗hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180
  • Invert ↗invert, invert-0
  • Saturate ↗saturate-0, saturate-50, saturate-100, saturate-150, saturate-200
  • Sepia ↗sepia, sepia-0
  • Backdrop Blur ↗backdrop-blur-sm, backdrop-blur, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl, backdrop-blur-3xl
  • Backdrop Brightness ↗backdrop-brightness-0, backdrop-brightness-50, backdrop-brightness-75, backdrop-brightness-90, backdrop-brightness-95, backdrop-brightness-100, backdrop-brightness-105, backdrop-brightness-110, backdrop-brightness-125, backdrop-brightness-150
  • Backdrop Contrast ↗backdrop-contrast-0, backdrop-contrast-50, backdrop-contrast-75, backdrop-contrast-100, backdrop-contrast-125, backdrop-contrast-150
  • Backdrop Grayscale ↗backdrop-grayscale, backdrop-grayscale-0
  • Backdrop Hue Rotate ↗backdrop-hue-rotate-0, backdrop-hue-rotate-15, backdrop-hue-rotate-30, backdrop-hue-rotate-60, backdrop-hue-rotate-90, backdrop-hue-rotate-180
  • Backdrop Invert ↗backdrop-invert, backdrop-invert-0
  • Backdrop Opacity ↗backdrop-opacity-0, backdrop-opacity-5, ..., backdrop-opacity-100
  • Backdrop Saturate ↗backdrop-saturate-0, backdrop-saturate-50, backdrop-saturate-100, backdrop-saturate-150, backdrop-saturate-200
  • Backdrop Sepia ↗backdrop-sepia, backdrop-sepia-0

Flexbox & Grid

  • Flex Basis ↗basis-0, basis-1, ..., basis-full
  • Flex Direction ↗flex-row, flex-row-reverse, flex-col, flex-col-reverse
  • Flex Wrap ↗flex-wrap, flex-wrap-reverse, flex-nowrap
  • Flex ↗flex-1, flex-auto, flex-initial, flex-none
  • Flex Grow ↗grow, grow-0
  • Flex Shrink ↗shrink, shrink-0
  • Order ↗order-first, order-last, order-none, order-1, order-2, ..., order-12
  • Grid Template Columns ↗grid-cols-1, grid-cols-2, ..., grid-cols-12, grid-cols-none
  • Grid Column, start/end ↗col-auto, col-span-1, ..., col-span-full
  • Grid Template Rows ↗grid-rows-1, grid-rows-2, ..., grid-rows-6, grid-rows-none
  • Grid Row, start/end ↗row-auto, row-span-1, ..., row-span-full
  • Grid Auto Flow ↗grid-flow-row, grid-flow-col, grid-flow-row-dense, grid-flow-col-dense
  • Grid Auto Columns ↗auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr
  • Grid Auto Rows ↗auto-rows-auto, auto-rows-min, auto-rows-max, auto-rows-fr
  • Gap ↗gap-0, gap-1, ..., gap-64, gap-px, gap-x-0, gap-x-1, ..., gap-y-0, gap-y-1, ...
  • Justify Content ↗justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly, justify-items-start, justify-items-center, justify-items-end, justify-items-stretch
  • Justify Items ↗justify-items-start, justify-items-center, justify-items-end, justify-items-stretch
  • Justify Self ↗justify-self-auto, justify-self-start, justify-self-center, justify-self-end, justify-self-stretch
  • Align Content ↗content-center, content-start, content-end, content-between, content-around, content-evenly
  • Align Items ↗items-start, items-center, items-end, items-baseline, items-stretch
  • Align Self ↗self-auto, self-start, self-center, self-end, self-stretch
  • Place Content ↗place-content-center, place-content-start, place-content-end, place-content-between, place-content-around, place-content-evenly
  • Place Items ↗place-items-start, place-items-center, place-items-end, place-items-stretch
  • Place Self ↗place-self-auto, place-self-start, place-self-center, place-self-end, place-self-stretch

Backgrounds

SVG

  • Fill ↗fill-current, fill-{color}, e.g., fill-red-500, fill-blue-700
  • Stroke ↗stroke-current, stroke-{color}, e.g., stroke-red-500, stroke-blue-700
  • Stroke Width ↗stroke-0, stroke-1, stroke-2

Accessibility

Borders

Transitions & Animation

Tables

287 TUTORIALS · 22 TOPICSREADY