Bird
Raised Fist0
Tailwindmarkup~5 mins

Why display modes matter in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Display modes control how elements appear and behave on a webpage. They help organize content so it looks good and works well on all devices.

When you want to show items side by side or stacked.
When you need to hide or show parts of a page on different screen sizes.
When you want to create flexible layouts that adjust automatically.
When you want to center content horizontally or vertically.
When you want to switch between block and inline styles for text or images.
Syntax
Tailwind
class="block"
class="inline"
class="inline-block"
class="flex"
class="grid"
class="hidden"

Use these classes on HTML elements to change how they display.

Tailwind makes it easy to switch display modes with simple class names.

Examples
This element takes full width and starts on a new line.
Tailwind
<div class="block">Block element</div>
This element flows with text and does not start a new line.
Tailwind
<span class="inline">Inline element</span>
This container arranges its children in a flexible row or column.
Tailwind
<div class="flex">Flex container</div>
This element is not visible on the page.
Tailwind
<div class="hidden">Hidden element</div>
Sample Program

This page shows different display modes using Tailwind classes. You see block, inline, flex, and hidden elements with colors to help you notice their behavior.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Display Modes Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Display Modes Matter</h1>

  <div class="block bg-blue-200 p-2 mb-2">Block: full width, new line</div>

  <span class="inline bg-green-200 p-2">Inline: flows with text</span>
  <span class="inline bg-green-300 p-2">Another inline</span>

  <div class="flex bg-yellow-200 p-2 mt-4">
    <div class="bg-yellow-400 p-2 mr-2">Flex item 1</div>
    <div class="bg-yellow-500 p-2">Flex item 2</div>
  </div>

  <div class="hidden bg-red-200 p-2 mt-4">You cannot see me!</div>
</body>
</html>
OutputSuccess
Important Notes

Remember that block elements take full width and start on a new line.

inline elements flow with text and do not break lines.

flex helps arrange items easily in rows or columns.

Summary

Display modes control how elements appear and arrange on the page.

Tailwind classes like block, inline, flex, and hidden make it easy to change display.

Using the right display mode helps your page look good and work well on all devices.

Practice

(1/5)
1. Which Tailwind class makes an element behave like a block-level element, taking full width by default?
easy
A. block
B. inline
C. inline-flex
D. hidden

Solution

  1. Step 1: Understand block display behavior

    A block element takes the full width available and starts on a new line.

  2. Step 2: Match Tailwind class to behavior

    The block class in Tailwind applies this block display mode.

  3. Final Answer:

    <code>block</code> -> Option A

  4. Quick Check:

    Block display = block class [OK]
Hint: Block elements use block class for full width [OK]
Common Mistakes:
  • Confusing inline with block display
  • Thinking flex is block by default
  • Assuming hidden shows the element
2. Which Tailwind class correctly hides an element from the page?
easy
A. hidden
B. block
C. visible
D. flex

Solution

  1. Step 1: Identify the class that hides elements

    The hidden class in Tailwind sets display: none;, hiding the element.

  2. Step 2: Confirm other classes show elements

    visible is not a Tailwind display class, block and flex show elements.

  3. Final Answer:

    <code>hidden</code> -> Option A

  4. Quick Check:

    Hide element = hidden class [OK]
Hint: Use hidden to hide elements in Tailwind [OK]
Common Mistakes:
  • Using visible which is not a Tailwind display class
  • Confusing block or flex as hiding classes
  • Trying to hide with opacity or visibility classes only
3. What will be the layout behavior of this element with Tailwind classes: inline flex?
medium
A. The element behaves as a block and its children are flex items.
B. The element behaves as a flex container and takes full width.
C. The element is hidden because conflicting display classes cancel out.
D. The element behaves inline but also applies flex layout to its children.

Solution

  1. Step 1: Understand Tailwind display class precedence

    Tailwind applies the last display class in the list, so flex overrides inline.

  2. Step 2: Check combined classes effect

    However, if both are applied, the element behaves as a flex container, but if inline is applied first and flex second, it becomes a flex container with block behavior.

  3. Step 3: Clarify the question's class order

    Since classes are inline flex, flex overrides inline, so element behaves as flex container (block-level).

  4. Final Answer:

    The element behaves as a flex container and takes full width. -> Option B

  5. Quick Check:

    Last display class wins = flex container [OK]
Hint: Last display class in Tailwind wins [OK]
Common Mistakes:
  • Thinking multiple display classes combine effects
  • Assuming inline and flex can coexist
  • Ignoring class order importance
4. You want a container to arrange children horizontally using Tailwind, but your code uses block and children stack vertically. What is the mistake?
medium
A. Using flex on children instead of container
B. Not adding inline to children
C. Forgetting to add hidden to children
D. Using block instead of flex on the container

Solution

  1. Step 1: Understand display modes for layout

    block makes container stack children vertically by default.

  2. Step 2: Use flex for horizontal layout

    To arrange children horizontally, container must have flex display.

  3. Final Answer:

    Using block instead of flex on the container -> Option D

  4. Quick Check:

    Horizontal layout needs flex container [OK]
Hint: Use flex on container for horizontal layout [OK]
Common Mistakes:
  • Applying flex to children instead of container
  • Thinking inline arranges children horizontally
  • Not understanding block stacks vertically
5. You want a button to be inline with text but also have flex layout inside to center icon and label. Which Tailwind classes correctly achieve this?
hard
A. inline-block flex justify-between
B. block flex justify-center
C. inline-flex items-center
D. flex inline items-start

Solution

  1. Step 1: Make button inline with text

    The inline-flex class makes the button flow inline with text.

  2. Step 2: Apply flex layout inside button

    The inline-flex class makes the button a flex container for its children.

  3. Step 3: Center icon and label vertically

    items-center aligns children vertically center inside flex container.

  4. Final Answer:

    <code>inline-flex items-center</code> -> Option C

  5. Quick Check:

    Inline + flex + center items = inline-flex items-center [OK]
Hint: Use inline-flex items-center for inline flex centering [OK]
Common Mistakes:
  • Using block makes button block-level, breaking inline flow
  • Wrong order or missing items-center for vertical alignment
  • Using justify-between instead of centering