tailwindcss.com Open in urlscan Pro
2606:4700:10::6816:1490  Public Scan

URL: https://tailwindcss.com/docs/display
Submission: On November 12 via manual from IN — Scanned from DE

Form analysis 0 forms found in the DOM

Text Content

Tailwind CSS home page
v3.4.13
Introducing CatalystA modern application UI kit for React
 * Docs
 * Components
 * Blog
 * Showcase

ThemeTailwind CSS on GitHub
Search
Navigation

Navigation
 1. Layout
 2. Display

Quick search...Ctrl K

 * 
   Documentation
 * 
   Components
 * 
   Templates
 * 
   Screencasts
 * 
   Playground
 * 
   Resources
 * 
   Community

 * GETTING STARTED
   
   * Installation
   * Editor Setup
   * Using with Preprocessors
   * Optimizing for Production
   * Browser Support
   * Upgrade Guide

 * CORE CONCEPTS
   
   * Utility-First Fundamentals
   * Hover, Focus, and Other States
   * Responsive Design
   * Dark Mode
   * Reusing Styles
   * Adding Custom Styles
   * Functions & Directives

 * CUSTOMIZATION
   
   * Configuration
   * Content
   * Theme
   * Screens
   * Colors
   * Spacing
   * Plugins
   * Presets

 * BASE STYLES
   
   * Preflight

 * LAYOUT
   
   * Aspect Ratio
   * Container
   * Columns
   * Break After
   * Break Before
   * Break Inside
   * Box Decoration Break
   * Box Sizing
   * Display
   * Floats
   * Clear
   * Isolation
   * Object Fit
   * Object Position
   * Overflow
   * Overscroll Behavior
   * Position
   * Top / Right / Bottom / Left
   * Visibility
   * Z-Index

 * FLEXBOX & GRID
   
   * Flex Basis
   * Flex Direction
   * Flex Wrap
   * Flex
   * Flex Grow
   * Flex Shrink
   * Order
   * Grid Template Columns
   * Grid Column Start / End
   * Grid Template Rows
   * Grid Row Start / End
   * Grid Auto Flow
   * Grid Auto Columns
   * Grid Auto Rows
   * Gap
   * Justify Content
   * Justify Items
   * Justify Self
   * Align Content
   * Align Items
   * Align Self
   * Place Content
   * Place Items
   * Place Self

 * SPACING
   
   * Padding
   * Margin
   * Space Between

 * SIZING
   
   * Width
   * Min-Width
   * Max-Width
   * Height
   * Min-Height
   * Max-Height
   * Size

 * TYPOGRAPHY
   
   * Font Family
   * Font Size
   * Font Smoothing
   * Font Style
   * Font Weight
   * Font Variant Numeric
   * Letter Spacing
   * Line Clamp
   * Line Height
   * List Style Image
   * List Style Position
   * List Style Type
   * Text Align
   * Text Color
   * Text Decoration
   * Text Decoration Color
   * Text Decoration Style
   * Text Decoration Thickness
   * Text Underline Offset
   * Text Transform
   * Text Overflow
   * Text Wrap
   * Text Indent
   * Vertical Align
   * Whitespace
   * Word Break
   * Hyphens
   * Content

 * BACKGROUNDS
   
   * Background Attachment
   * Background Clip
   * Background Color
   * Background Origin
   * Background Position
   * Background Repeat
   * Background Size
   * Background Image
   * Gradient Color Stops

 * BORDERS
   
   * Border Radius
   * Border Width
   * Border Color
   * Border Style
   * Divide Width
   * Divide Color
   * Divide Style
   * Outline Width
   * Outline Color
   * Outline Style
   * Outline Offset
   * Ring Width
   * Ring Color
   * Ring Offset Width
   * Ring Offset Color

 * EFFECTS
   
   * Box Shadow
   * Box Shadow Color
   * Opacity
   * Mix Blend Mode
   * Background Blend Mode

 * FILTERS
   
   * Blur
   * Brightness
   * Contrast
   * Drop Shadow
   * Grayscale
   * Hue Rotate
   * Invert
   * Saturate
   * Sepia
   * Backdrop Blur
   * Backdrop Brightness
   * Backdrop Contrast
   * Backdrop Grayscale
   * Backdrop Hue Rotate
   * Backdrop Invert
   * Backdrop Opacity
   * Backdrop Saturate
   * Backdrop Sepia

 * TABLES
   
   * Border Collapse
   * Border Spacing
   * Table Layout
   * Caption Side

 * TRANSITIONS & ANIMATION
   
   * Transition Property
   * Transition Duration
   * Transition Timing Function
   * Transition Delay
   * Animation

 * TRANSFORMS
   
   * Scale
   * Rotate
   * Translate
   * Skew
   * Transform Origin

 * INTERACTIVITY
   
   * Accent Color
   * Appearance
   * Cursor
   * Caret Color
   * Pointer Events
   * Resize
   * Scroll Behavior
   * Scroll Margin
   * Scroll Padding
   * Scroll Snap Align
   * Scroll Snap Stop
   * Scroll Snap Type
   * Touch Action
   * User Select
   * Will Change

 * SVG
   
   * Fill
   * Stroke
   * Stroke Width

 * ACCESSIBILITY
   
   * Screen Readers
   * Forced Color Adjust

 * OFFICIAL PLUGINS
   
   * Typography
   * Forms
   * Aspect Ratio
   * Container Queries

Layout


DISPLAY

Utilities for controlling the display box type of an element.


QUICK REFERENCE

Class
Properties
blockdisplay: block; inline-blockdisplay: inline-block; inlinedisplay: inline;
flexdisplay: flex; inline-flexdisplay: inline-flex; tabledisplay: table;
inline-tabledisplay: inline-table; table-captiondisplay: table-caption;
table-celldisplay: table-cell; table-columndisplay: table-column;
table-column-groupdisplay: table-column-group; table-footer-groupdisplay:
table-footer-group; table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group; table-rowdisplay: table-row;
flow-rootdisplay: flow-root; griddisplay: grid; inline-griddisplay: inline-grid;
contentsdisplay: contents; list-itemdisplay: list-item; hiddendisplay: none;



Show all classes


BASIC USAGE


BLOCK & INLINE

Use the inline, inline-block, and block utilities to control the flow of text
and elements.

When controlling the flow of text, using the CSS property display: inline will
cause the text inside the element to wrap normally.

While using the property display: inline-block will wrap the element to prevent
the text inside from extending beyond its parent.

Lastly, using the property display: block will put the element on its own line
and fill its parent.


<div>
  When controlling the flow of text, using the CSS property
  <span class="inline">display: inline</span>
  will cause the text inside the element to wrap normally.

  While using the property <span class="inline-block">display: inline-block</span>
  will wrap the element to prevent the text inside from extending beyond its parent.

  Lastly, using the property <span class="block">display: block</span>
  will put the element on its own line and fill its parent.
</div>


FLOW ROOT

Use the flow-root utility to create a block-level element with its own block
formatting context.

Well, let me tell you something, funny boy. Y'know that little stamp, the one
that says "New York Public Library"? Well that may not mean anything to you, but
that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making
the scene, flaunting convention. Yeah, I know what you're thinking. What's this
guy making such a big stink about old library books? Well, let me give you a
hint, junior.


<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>


FLEX

Use the flex utility to create a block-level flex container.

Andrew Alfred Technical advisor


<div class="flex items-center">
  <img src="path/to/image.jpg">
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>


INLINE FLEX

Use the inline-flex utility to create an inline flex container that flows with
text.

Today I spent most of the day researching ways to take advantage of the fact
that bottles can be returned for 10 cents in Michigan, but only 5 cents here.
Kramer keeps telling me there is no way to make it work, that he has run the
numbers on every possible approach, but I just have to believe there's a way to
make it work, there's simply too much opportunity here.



<p>
  Today I spent most of the day researching ways to ...
  <span class="inline-flex items-baseline">
    <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
    <span>Kramer</span>
  </span>
  keeps telling me there is no way to make it work, that ...
</p>


GRID

Use the grid utility to create a grid container.

01
02
03
04
05
06
07
08
09


<div class="grid gap-4 grid-cols-3 grid-rows-3">
  <!-- ... -->
</div>


INLINE GRID

Use the inline-grid utility to create an inline grid container.

01
02
03
04
05
06
01
02
03
04
05
06


<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>


CONTENTS

Use the contents utility to create a “phantom” container whose children act like
direct children of the parent.

01
02
03
04


<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>


TABLE

Use the table, table-row, table-cell, table-caption, table-column,
table-column-group, table-header-group, table-row-group, and table-footer-group
utilities to create elements that behave like their respective table elements.

Song
Artist
Year
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975


<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Witchy Woman</div>
      <div class="table-cell ...">The Eagles</div>
      <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>


HIDDEN

Use the hidden utility to set an element to display: none and remove it from the
page layout (compare with invisible from the visibility documentation).

01
02
03


<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

--------------------------------------------------------------------------------


APPLYING CONDITIONALLY


HOVER, FOCUS, AND OTHER STATES

Tailwind lets you conditionally apply utility classes in different states using
variant modifiers. For example, use hover:inline-flex to only apply the
inline-flex utility on hover.

<div class="flex hover:inline-flex">
  <!-- ... -->
</div>


For a complete list of all available state modifiers, check out the Hover,
Focus, & Other States documentation.


BREAKPOINTS AND MEDIA QUERIES

You can also use variant modifiers to target media queries like responsive
breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
md:inline-flex to apply the inline-flex utility at only medium screen sizes and
above.

<div class="flex md:inline-flex">
  <!-- ... -->
</div>


To learn more, check out the documentation on Responsive Design, Dark Mode and
other media query modifiers.

Box SizingFloats

Copyright © 2024 Tailwind Labs Inc.

Trademark Policy

Edit this page on GitHub

ON THIS PAGE

 * Quick reference
 * Basic usage
 * Block & Inline
 * Flow Root
 * Flex
 * Inline Flex
 * Grid
 * Inline Grid
 * Contents
 * Table
 * Hidden
 * Applying conditionally
 * Hover, focus, and other states
 * Breakpoints and media queries

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

> “This is the survival kit I wish I had when I started building apps.”

Derrick Reimer, SavvyCal