Search⌘ K
AI Features
Home
Courses
Modern CSS with Tailwind

Layout Features

Explore how Tailwind CSS utilities help create structured page layouts by managing containers, viewport settings, floats, clears, positions, and stacking with z-index. Understand practical techniques for organizing navigation, sidebars, footers, and complex element groupings on your web pages.

We'll cover the following...

With Tailwind, we can lay out the elements on an entire page and manage common features like navigation, sidebars, and footers. We can also use Tailwind to put complex groupings of elements within a page, such as cards or hero blocks.

Let’s start with some general utilities Tailwind provides to help place elements on a page—the box-to-box relationships.

Containers

Many CSS frameworks use a container class as the general top-level container to specify the page width. While Tailwind does offer a .container utility, Tailwind’s version does much less than similar classes do in other frameworks. The .container utility specifies the max-width of the element based on the width of the browser viewport. For example, any viewport between 640 and 768 pixels wide would be set to a max-width of 640 pixels. Once the viewport goes over 768, the max-width stays at 768 pixels until the viewport hits 1024 pixels. It increases again when the viewport reaches 1280 pixels.

The advantage of using a container is that it allows us to only worry about those specific widths in our design rather than having to take into account any possible width the viewport might have.

If you are familiar with other frameworks, Tailwind’s .container would not have the features you may expect. A .container utility in Tailwind does not automatically horizontally center its child elements. To center them, we pair the container utility with mx-auto. A Tailwind .container utility also does not introduce padding or margin to pull its elements away from the browser’s border. We pair the container with a .m- or .p- utility to get this behavior. Therefore, a plausible class list for our top-level element might be class="container mx-auto py-12 px-6".


Viewport

In CSS, the viewport is the area of the browser where users can see the content. We’re concerned with the width of the viewport, because that determines how much content can be placed across the screen without scrolling horizontally. The HTML meta tag is used to control the viewport width on mobile screens. By default, mobile browsers often assume a wider display than the actual device (often 980 pixels) and scale the content to fit on screen. We should use the content="width=device-width,initial-scale=1" attribute for the browser to use the device size as the viewport rather than scaling the display down from a wider size.

Floats and clears

If we use Tailwind in a legacy project, we’ll need to deal with floats and clear fixes.

In CSS, the float property positions the content inside its container. Typically, the float property is used to position a particular element, often an image, to one side or the other of its container. This allows the rest of the container to stay completely on the other side, rather than mixing the elements together.

Tailwind provides .float-left and .float-right for positions, and .float-none as a reset option.

The CSS clear property forces an element to be placed below any elements it might otherwise overlap with on one or both sides. (Technically, it prevents other elements from floating, which amounts to the same thing.) Tailwind provides utilities to specify a clear behavior on either side, both sides, or no sides— .clear-left, .clear-right, .clear-both, and .clear-none.

Position and z-index

In CSS, the z-index property is an integer determining how items stack on top of each other along what would be the z-axis if we ran an axis outward perpendicular to the screen. Tailwind provides the pattern .z-{index}, where the index can be 0, 10, 20, 30, 40, 50, or auto. There is no negative option by default, but we can add one in the configuration file.