Tailwind CSS Reference

Complete Tailwind v4 utility class reference with CSS output.
163+ utilities organized by category.

Click to copyVisual examplesCSS mappings

Layout

12 utilities

Control how elements are positioned and displayed in the document.

Display21 Position5 Top / Right / Bottom / Left38 Float5 Clear6 Visibility3 Z-Index12 Overflow15 Overscroll Behavior9 Object Fit5 Object Position9 Columns26

Flexbox

12 utilities

Create flexible layouts with CSS flexbox.

Flex4 Flex Direction4 Flex Wrap3 Flex Grow2 Flex Shrink2 Flex Basis38 Justify Content8 Align Items5 Align Self6 Align Content9 Order27 Gap45

Grid

12 utilities

Build two-dimensional layouts with CSS grid.

Grid Template Columns14 Grid Template Rows14 Grid Column42 Grid Row42 Grid Auto Flow5 Grid Auto Columns4 Grid Auto Rows4 Justify Items4 Justify Self5 Place Content8 Place Items5 Place Self5

Spacing

4 utilities

Control padding, margin, and space between elements.

Padding59 Margin62 Space Between32 Aspect Ratio8

Sizing

8 utilities

Set width, height, and size constraints on elements.

Width44 Height44 Min-Width22 Max-Width24 Min-Height26 Max-Height27 Size33 Box Sizing2

Typography

22 utilities

Control fonts, text styling, and content formatting.

Backgrounds

8 utilities

Style element backgrounds with colors, gradients, and images.

Background Color31 Background Image12 Background Size3 Background Position9 Background Repeat6 Background Attachment3 Background Origin3 Background Clip4

Borders

12 utilities

Add borders, outlines, rings, and rounded corners.

Border Width32 Border Color15 Border Style6 Border Radius29 Outline Width5 Outline Color7 Outline Style5 Outline Offset5 Ring Width7 Ring Color8 Ring Offset7 Divide19

Effects

5 utilities

Add shadows, opacity, blend modes, and visual effects.

Box Shadow8 Text Shadow4 Opacity21 Mix Blend Mode18 Isolation2

Filters

18 utilities

Apply blur, brightness, contrast, and other filter effects.

Blur8 Brightness11 Contrast7 Drop Shadow7 Grayscale2 Hue Rotate6 Invert2 Saturate5 Sepia2 Backdrop Blur8 Backdrop Brightness11 Backdrop Contrast7 Backdrop Grayscale2 Backdrop Hue Rotate6 Backdrop Invert2 Backdrop Opacity16 Backdrop Saturate5 Backdrop Sepia2

Transforms

10 utilities

Scale, rotate, translate, and skew elements with CSS transforms.

Scale30 Rotate17 Translate29 Skew22 Transform Origin9 Transform Style2 Perspective7 Perspective Origin9 Backface Visibility2 Transform2

Transitions

8 utilities

Animate property changes with CSS transitions and animations.

Transition Property7 Transition Duration9 Transition Timing Function4 Transition Delay9 Transition Behavior2 Animation5 Will Change4 Forced Color Adjust2

Interactivity

14 utilities

Control cursor, selection, scrolling, and user interaction.

Cursor36 Pointer Events2 Resize4 Scroll Behavior2 Scroll Margin17 Scroll Padding17 Scroll Snap Align4 Scroll Snap Stop2 Scroll Snap Type6 Touch Action10 User Select4 Appearance2 Accent Color24 Caret Color24

Tables & Lists

6 utilities

Style tables, captions, and list markers.

Table Layout2 Caption Side2 Field Sizing2 List Style Type3 List Style Position2 List Style Image1

SVG

3 utilities

Control fill, stroke, and stroke width of SVG elements.

Fill25 Stroke25 Stroke Width3

Masks

9 utilities

Apply and control CSS mask images and effects.

Mask Image7 Mask Size3 Mask Position9 Mask Repeat6 Mask Origin3 Mask Clip7 Mask Composite4 Mask Mode3 Mask Type2

Looking for a specific class?

Each utility page shows all available classes with their exact CSS output. Click any class to copy it to your clipboard.

flex-direction justify-content grid-template-columns padding

About This Reference

Tailwind v4 Compatible

All utilities are updated for Tailwind CSS v4, including new features like logical properties, container queries support, and improved color handling.

Copy-Paste Ready

Every class can be copied with one click. See the exact CSS output so you understand what each utility does under the hood.

Visual Examples

Most utility pages include interactive visual demos so you can see exactly how each class affects your layout.

Related Utilities

Each page links to related utilities so you can discover complementary classes that work well together.

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect and copy classes from any Tailwind-powered site.

Get Frontend Hero now →