Tailwind Display

The tailwind display utility class allows you to control the display behavior of elements. With Tailwind's display class, you can easily modify how elements are rendered and positioned within the document flow.

How to apply Tailwind Display

To apply a specific tailwind display behavior to an element, you can use the display-{value} utility class, where {value} represents the desired display behavior. Here are the common values you can use:

• display-block: Renders the element as a block-level element, taking up the entire width of its parent container.
• display-inline: Renders the element as an inline-level element, allowing other elements to flow around it.
• display-inline-block: Renders the element as an inline-level block, allowing other elements to flow around it while also respecting its width and height.
• display-hidden: Hides the element from the layout, making it effectively invisible and not taking up any space. Here's an example:

<div>
  <p class="block">A</p>
  <p class="block">B</p>
  <p class="block">C</p>
  <p class="block">D</p>
</div>

Preview

Responsive Tailwind Display

Tailwind CSS allows you to apply display classes responsively at different breakpoints. To use responsive tailwind display classes, you can append the breakpoint prefix to the utility class. For example, md:display-inlinesets the display behavior to inline starting from the medium breakpoint and above.

<div class="display-inline md:display-block">
  This element is initially rendered as an inline-level element, but starting
  from the medium breakpoint and above, it becomes a block-level element.
</div>

In the above example, the display behavior of the <div> element is set to inline by default (display-inline), but starting from the medium breakpoint and above, it changes to block-level (md:display-block).

Tailwind Display Class Table

✨ What's Next?

Now that you’ve learned Tailwind CSS Display, try experimenting with:

• Tailwind Flex

• Tailwind grid

Windframe Tailwind blocks

Logo