Tailwind CSS - Display

Tailwind CSS - Display

The display property is one of the most fundamental in CSS, controlling how an element generates a box and participates in the page’s layout flow. Tailwind CSS provides a comprehensive set of utility classes to manage this property efficiently.

Core Display Utilities

Here are the most common display utilities and their modern use cases:

Class	CSS Property	Primary Use Case
block	display: block;	For elements that should take up the full width available and start on a new line.
inline	display: inline;	For elements that should flow with surrounding text. Width and height properties have no effect.
inline-block	display: inline-block;	A hybrid: flows like text but respects width, height, and vertical margins.
flex	display: flex;	Modern Standard for 1D Layout. Creates a flexible container for aligning items in a row or column.
grid	display: grid;	Modern Standard for 2D Layout. Creates a grid container for complex, two-dimensional layouts.
hidden	display: none;	Completely removes an element from the page. Widely used for responsive design and conditional UI.
contents	display: contents;	Makes the container element ‘disappear’, allowing its children to become direct children of the container’s parent in the layout.

Note on Table Utilities: Classes like table, table-row, and table-cell are provided for styling semantic HTML <table> elements. They should not be used for building main page layouts. For that, always prefer Flexbox (flex) or Grid (grid).

Practical Examples in Modern Development

Let’s move beyond basic examples and see how these utilities build real components.

Example 1: Building a Responsive Card with Flexbox

Here, flex is used to create a card. On small screens (sm:), it stacks vertically, and on medium screens and up (md:), it arranges side-by-side. The hidden and md:block classes control the visibility of the ‘Learn More’ button based on screen size.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Card</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 flex justify-center">

  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1515263487990-61b07816b324?q=80&w=2070" alt="Modern building architecture">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the right building for your business</a>
        <p class="mt-2 text-slate-500">Struggling to find a space that scales? We break down the key considerations for choosing your next commercial property.</p>
        <button class="mt-4 px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 hidden md:block">Learn More</button>
      </div>
    </div>
  </div>

</body>
</html>

Example 2: Creating a Page Layout with Grid

CSS Grid is perfect for top-level page structure. This example creates a common sidebar-and-main-content layout using grid and grid-cols-*. The layout is responsive, stacking on small screens and moving to a two-column layout on larger screens (lg:).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Page Layout</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

  <div class="container mx-auto p-4">
    <div class="grid lg:grid-cols-4 gap-6">

      <!-- Sidebar -->
      <aside class="lg:col-span-1 bg-white p-6 rounded-lg shadow">
        <h2 class="font-bold text-xl mb-4">Navigation</h2>
        <ul class="space-y-2">
          <li><a href="#" class="block p-2 rounded hover:bg-gray-200">Dashboard</a></li>
          <li><a href="#" class="block p-2 rounded hover:bg-gray-200">Team</a></li>
          <li><a href="#" class="block p-2 rounded hover:bg-gray-200">Projects</a></li>
        </ul>
      </aside>

      <!-- Main Content -->
      <main class="lg:col-span-3 bg-white p-6 rounded-lg shadow">
        <h1 class="font-bold text-2xl mb-4">Dashboard</h1>
        <p>Welcome to your main content area. This area takes up 3 of the 4 grid columns on large screens, while the sidebar takes up 1. On smaller screens, they stack naturally.</p>
      </main>

    </div>
  </div>

</body>
</html>