Tailwind CSS: How to Create a Responsive Layout

Last updated on May 16, 2022 Pennywise Loading... Post a comment

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

Overview

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

Breakpoint PrefixMinimum width
sm640px
md768px
lg1024px
xl1280px
2xl1536px

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.

Example

Preview

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

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

    <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>
        </main>
        <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>
        </aside>
    </div>

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

Conclusion

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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles