How to Use Tailwind CSS 4 for Fully Responsive Web Design

Tailwind CSS 4 makes it easier than ever to create responsive interfaces that look fantastic on all devices by introducing a more robust and adaptable approach to responsive design. We'll look at how to use container queries and utility variations to create responsive layouts that are both reliable and easy to use in this guide

The Power of Flexible Utility Variants

Tailwind's mobile-first breakpoint system is the foundation of its responsive design capabilities. A straightforward syntax can be used to conditionally apply each Tailwind utility class at various breakpoints: Use the breakpoint name and a colon to prefix the class.

Example:

<img class="w-16 md:w-32 lg:w-48" src="..." />

This increases the width to w-32 on medium screens and w-48 on large screens, while maintaining the default width of w-16.

Example from the Real World: Responsive Card Elements

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md 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="/img/building.jpg" alt="Modern building architecture" />
    </div>
    <div class="p-8">
      <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Company retreats</div>
      <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
      <p class="mt-2 text-gray-500">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
    </div>
  </div>
</div>

• By default, the layout is stacked; with md:flex, it changes to side-by-side.
• When the image is in flex mode, md:shrink-0 stops it from shrinking.
• md:h-full and md:w-48 are used to adjust height and width. These prefixes can be applied to any utility class, including layout, typography, and spacing.

Best Practices For Mobile-First Development

Unprefixed utilities prioritise mobile devices because they work on all screen sizes. Use the proper breakpoint prefix to override these on larger screens.

<!-- Good practice -->
<div class="text-center sm:text-left"></div>

This aligns the text to the left on sm and up, and centres it on mobile devices.

Focusing on Breakpoint Areas

Tailwind allows breakpoints to be combined using max-* variations:

<div class="md:max-xl:flex">
  <!-- Only flex between md and xl -->
</div>

Do you want to focus on a single breakpoint? Put two together:

<div class="md:max-lg:flex">
  <!-- Applies only between 768px and 1024px -->
</div>

Customizing Breakpoints

With Tailwind 4, you can use @theme in your CSS to define unique breakpoints:

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

Next, incorporate them into your markup:

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  <!-- Custom responsive grid -->
</div>

One-Off Responsive Utilities with Arbitrary Values

Any media query using min-[value] or max-[value] is supported by Tailwind:

<div class="max-[600px]:bg-sky-300 min-[320px]:text-center">
  <!-- Custom breakpoints without theme config -->
</div>

Container Queries in Tailwind 4

Container queries, one of Tailwind CSS 4's most significant additions, allow you to apply styles based on a parent container's size rather than the viewport. As a result, components become more context-aware and modular.

Basic Usage

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- Adjusts layout based on container size -->
  </div>
</div>

Container queries are mobile-first, just like responsive utilities.

Max-Width Container Queries

<div class="@container">
  <div class="flex flex-row @max-md:flex-col">
    <!-- Switches layout below md size -->
  </div>
</div>

Targeting a Range

<div class="@container">
  <div class="flex flex-row @sm:@max-md:flex-col">
    <!-- Only applies between sm and md -->
  </div>
</div>

Named Containers

Deeply nested layouts benefit greatly from named containers:

<div class="@container/main">
  <div class="flex flex-row @sm/main:flex-col">
    <!-- Targets 'main' container specifically -->
  </div>
</div>

Custom Container Sizes

Use the --container-* variables to increase container sizes:

@theme {
  --container-8xl: 96rem;
}

Utilise in markup:

<div class="@container">
  <div class="flex flex-col @8xl:flex-row">
    <!-- Applies above 96rem container width -->
  </div>
</div>

Arbitrary Container Breakpoints

<div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
    <!-- Applies above 475px container size -->
  </div>
</div>

Container Units

For container-relative widths, use units such as cqw:

<div class="@container">
  <div class="w-[50cqw]">
    <!-- Width is 50% of the container -->
  </div>
</div>

Conclusion

With Tailwind CSS 4, you don't have to use hidden media queries in your stylesheets for responsive design, which is hard to keep up to date. Alternatively, you may incorporate flexibility into your markup with the help of expressive and user-friendly utility classes and container queries. Tailwind's modern tools offer you all you need to create responsive user interfaces more quickly and intelligently, whether creating dynamic components that adapt to their containers or layouts optimised for mobile devices.

Want to take your responsive Tailwind designs to the next level? Contact Staticmania to add a beautiful, interactive, and fully responsive website using Tailwind CSS 4.