Tailwind CSS: How to Create a Responsive Layout

Updated: July 26, 2022 By: Pennywise Post a comment

This succinct, practical article shows you how to create responsive and adaptive user interfaces in Tailwind CSS.


You can style responsive elements by using the following mobile-first breakpoint prefix system:

Breakpoint PrefixMinimum width

With a breakpoint prefix stays at the beginning, a utility will only make impact from a certain viewport size. For example: md:bg-red-500 only creates a red background when the viewport width is equal or greater than 768px.

When styling a component for mobile, you need to use the unprefixed version of a utility, not the sm prefix.

For more clarity, please see the complete example below.



This example will create a typical web layout consisting of header, main content, sidebar, and footer. When the screen is small, the main content and sidebar will be in one column. When the screen is 768px or larger, they will be next to each other horizontally. In addition, the font size also changes at breakpoint 768px.

The Code

    <header class="bg-amber-400 p-5">
        <h1 class="text-2xl md:text-4xl">Header</h1>

    <div class="bg-white my-5 w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
        <main class="bg-sky-300 md:w-2/3 lg:w-3/4 px-5 py-40">
            <h1 class="text-2xl md:text-4xl">Main Content</h1>
        <aside class="bg-green-300 md:w-1/3 lg:w-1/4 px-5 py-40">
            <h1 class="text-2xl md:text-4xl">Sidebar</h1>

    <footer class="bg-slate-800 mt-auto p-5">
        <h1 class="text-2xl md:text-4xl text-white">Footer</h1>


You’ve learned how to build responsive user interfaces with the breakpoint system of Tailwind CSS and applied that knowledge in a practical example. If you’d like to explore more new and interesting stuff about modern frontend development, take a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles