Why display modes matter in Tailwind - See It in Action

Why Display Modes Matter

📖 Scenario: You are creating a simple webpage to show how different display modes affect layout. This helps understand why choosing the right display mode is important for arranging content on a page.

🎯 Goal: Build a webpage with three colored boxes arranged using different CSS display modes: block, inline-block, and flex. This will visually show how each display mode changes the layout.

📋 What You'll Learn

Use Tailwind CSS classes to set display modes

Create three colored boxes with text inside

Arrange boxes using block, inline-block, and flex display modes in separate sections

Include semantic HTML structure with section and main tags

Make sure the page is responsive and accessible

💡 Why This Matters

🌍 Real World

Understanding display modes helps you build layouts that look good and work well on all devices.

💼 Career

Web developers must know how to use display modes to create flexible, responsive, and accessible user interfaces.

1

Create the HTML structure with three colored boxes

Create a main element containing three div elements. Each div should have the classes bg-red-400, bg-green-400, and bg-blue-400 respectively. Add the text Box 1, Box 2, and Box 3 inside each box. Also, add p-4 and text-white classes to each box for padding and text color.

Tailwind

Hint

Use three div elements inside main. Add Tailwind classes for background color, padding, and white text.

2

Wrap each display mode example in a section with a heading

Inside the main element, create three section elements. Each section should have a h2 heading with the texts Block Display, Inline-Block Display, and Flex Display respectively. Move the three colored boxes into the first section for now.

Tailwind

Hint

Use three section elements inside main. Add h2 headings with the exact texts. Put the boxes inside the first section.

3

Apply inline-block display to boxes in the second section

In the second section with heading Inline-Block Display, add three div boxes with the same colors and texts as before. Add the Tailwind class inline-block along with p-4 and text-white to each box.

Tailwind

  
    Inline-Block Display
    
  

Hint

Add three div boxes inside the second section. Use inline-block class with padding and white text.

4

Use flex display to arrange boxes in the third section

In the third section with heading Flex Display, add a container div with the Tailwind class flex. Inside it, add three div boxes with the same colors and texts as before, each with p-4 and text-white classes.

Tailwind

  
    Flex Display
    
  

Hint

Add a div with class flex inside the third section. Put three colored boxes inside it with padding and white text.

Practice

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