Mobile responsive with Tailwindcss

September 25, 2024

Now a days mobile phones are popular among the users, having a website that is mobile responsive not only will it look good but will also expand your website to mobile users.

Tailwindcss is a very effective CSS framework that could speed up your coding processes or could significantly slow it down, a developer must first know and understand plain old CSS to understand and leverage the effectiveness of Tailwindcss.

If you’re a front end developer who is just starting I recommend that you should first undestand what are flex displays, a good starting ground is Flexbox Playground where you can play around the many configurations of flex.

Once you understand plain old CSS and have a good grasp of flex displays, we can now start taking advantage of Tailwindcss to make a mobile responsive design.

Note that this is under the assumption you already now a little bit of Tailwindcss basics.

Lets now make a mobile responsive static html using Tailwindcss.

Prerequisites

Good understanding of CSS
Basic/Minimum Tailwindcss knowledge
Tailwindcss Installed
Browser of choice that can emulate screen sizes like Chrome
Text editor

Now we should also want to add some custom dimensions to our browser emulated screens for testing our mobile responsive design.

Usually I like to add HD, FHD, 2k (QHD), 4K and a custom design resolution.

Name	Resolution (W x H)
HD	1280 x 720
FHD	1920 x 1080
Design	1440 x 1024
2K	2560 x 1440
4K	3840 x 2160

Initializing

Let's create a directory for our html.

mkdir tailwind-example

Now we will need to init tailwind with the command below.

cd tailwind-example

npx tailwindcss init

After initializing we should have a tailwind.config.js with the contents below.

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
    extend: {},
},
plugins: [],
}

We should now add the path to our html files for Tailwind to watch and determine what classes needed to be purged or retained. Note that it can also accept patterns, see Tailwind Content Configuration.

For our case it should only be index.html

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [ 'index.html' ],
theme: {
    extend: {},
},
plugins: [],
}

Lets also create an input.css with Tailwind directives just like below. See Tailwindcss intallation for more info.

@tailwind base;
@tailwind components;
@tailwind utilities;

Next lets run the tailwind command to watch and generate an output.css

npx tailwindcss -i input.css -o output.css -c tailwind.css.conf --watch

Lets create an index.html with the contents below. Notice that we haven't loaded output.css yet.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div>

            <div>
                <h1>My First Heading</h1>
                <h3>My subheading</h3>
            </div>

            <div>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
                </p>
            </div>

        </div>

    </body>
</html>

We should now have something like below.

Lets now load the output.css and add some borders to better visualize the divs.

<head>
    <link rel="stylesheet" href="output.css">
</head>
<body>
    <div>
        <div class="border border-amber-500">
            <h1>My First Heading</h1>
            ...
        </div>

        <div class="border border-red-500">
            <p>
                Lorem Ipsum is simply ...
            </p>
        </div>

    </div>
</body>

Our index.html file should look just like below.

Notice that h1 and h3 are now the same size with p contents. This is because Tailwindcss overrides the styles and forces you to style them yourself.

To bring this back we could either add some classes directly to the h1 and h3 tags just like below.

...
<div class="border border-amber-500">
    <h1 class="text-3xl font-bold">My First Heading</h1>
    <h3 class="text-lg font-bold">My subheading</h3>
</div>
...

Or we could use the @layer base directive in input.css just like below.

...
@layer base {
    h1 {
        @apply text-3xl font-bold
    }
    h3 {
        @apply text-lg font-bold
    }
}
...

The above should apply the style to all h1 and h3 tags without needing to explicitly specify the classes. See Tailwindcss Functions and Directives to learn more about the directives.

We should now have something like below.

Next, in a design perspective we need to put left and right "padding".

My thought proccess usually starts should I cover this screen size?
What padding looks good on mobile screens?

Currently my rule of thumb would be to
use FHD (1920 x 1080) as my largest width,
Design (1440 x 1024) as my base with 160 pixels left and right padding then work my way around the other sizes.

2K and 4K aren't quite common and besides most Desktop OS like MAC OS would generally use a lower resolution for displaying UI components for a better UX even though the screen could go up to 4K.

With that in mind we can now start adding some css to our container. Lets make a app-container class just like below.

...
@layer components {
    .app-container {
    }
}
...

Lets add the max resolution width we would like to handle and automatically center it using margin left and right auto.

...
@layer components {
    .app-container {
        @apply mx-auto max-w-[calc(120rem)]
    }
}
...

mx-auto sets the style to margin-left and margin-right = auto.
max-w-[calc(120rem)] sets the maximum width to 1920px, assuming 1rem = 16px, 120rem = 1920px.

Lets now set the style to the container div in index.html

<div class="app-container">
    <div class="border border-amber-500">
        ...
    </div>

    <div class="border border-red-500">
        ...
    </div>
</div>

Since we set 1920px as our max width FHD width and below should not change but for our 2K and 4K screen sizes it should now look like this.

Now we are ready to ignore 2K and 4K screens and just look at it from time to time to check for any issues.

Screen Responsive Breakpoint Guide

Lets now focus on FHD screens and below sizes.
Below is a guide line for what screens in the emulator to check and what is their Tailwindcss breakpoint.

Breakpoint prefix	Min width	Emulated Screen(s)
sm	640px	Any mobile screen I use iPhone SE and Pixel 7
md	768px	iPad Mini and iPad Air
lg	1024px	iPad Pro
xl	1280px	HD and Design
2xl	1536px	FHD

Screen Paddings

Mobile Screen Padding

Lets now add some padding for mobile sizes.

@layer components {
    .app-container {
        @apply px-4 ...
    }
}

For mobile screens I like to use px-4 for a 16px side paddings.

Tablet Size Screen Padding

For tablets I like to go with the iPad Mini, iPad Air, iPad Pro.

@layer components {
    .app-container {
        @apply lg:px-6 ...
    }
}

For iPad Mini and iPad Air sizes I like to retain the px-4 so we skip md: and go straight to lg:

We should now have a slightly bigger padding.

HD Screen Padding

For HD screens a.k.a. 720p will now have a significantly bigger padding compared to tablets and mobile screen sizes.

@layer components {
    .app-container {
        @apply xl:px-40 ...
    }
}

Since our Design screen size falls under HD, xl:, I like to set it to px-40 for a 160px side paddings.

It should now look like below.

FHD Screen Padding

For FHD screens a.k.a. 1080p I like to follow the 11% padding for both sides. I got this dividing the Design padding and the its width so 160 / 1440 = 0.11 (11%)

@layer components {
    .app-container {
        @apply 2xl:px-52 ...
    }
}

The closest 11% for 1920px width is px-52 ( 208px ).

We should now have screen that looks like this.

Content Layout

Next we would like to have different layouts for our content.

Desktop screens or larger tablet screens should have the heading and paragraph besides each other.

Mobile screens or smaller tablet screens should have the heading ontop the paragraph.

Lets start with mobile screens first and make our way up.

@layer components {
    .app-container {
        @apply flex flex-col gap-y-4 mt-4 ...
    }
}

This is the time where knowledge of flex displays are needed, we first add flex and flex-col as the default to make our mobile screens appear like this.

gap-y-4 adds a 16px vertical margin gutter between heading and the paragraph.
mt-4 adds a 16px margin top.

Now that we have a base layout, we would then move the heading and paragraph besides each other when the width is large enough, for this example lets use lg: (iPad Pro) as our breakpoint size to switch to desktop layout, I usually use xl: but sometimes for contents I hover between lg: and xl: it's totally up to you or the designer.

@layer components {
    .app-container {
        @apply lg:flex-row lg:gap-y-0 lg:gap-x-8 ...
    }
}

The above we override flex-col to flex-row, remove gap-y-4 with gap-y-0 and replace it with gap-x-4 for a horizontal gutter.

We should now have something like this.

Then with the same concept we can then add some design to our inner divs.

<div class="app-container">

    <div class="
        lg:justify-center lg:content-center lg:w-1/2
        text-center
        border border-amber-500 w-auto
    ">
        ...
    </div>

    <div class="
        lg:p-4 lg:w-1/2
        border border-red-500 w-auto
    ">
        ...
    </div>

</div>

We should then have something like below for both our mobile and desktop screens.

Mobile

Desktop

Summary

To summarize things we should have index.html and input.css like below.

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="output.css" />
    </head>
    <body>

        <div class="app-container">

            <div class="
                lg:justify-center lg:content-center lg:w-1/2
                text-center
                border border-amber-500 w-auto
            ">
                <h1 class="text-3xl font-bold">My First Heading</h1>
                <h3 class="text-lg font-bold">My subheading</h3>
            </div>

            <div class="
                lg:p-4 lg:w-1/2
                border border-red-500 w-auto
            ">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
                </p>
            </div>

        </div>

    </body>
</html>

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .app-container {
        @apply
        lg:flex-row lg:gap-y-0 lg:gap-x-4
        flex flex-col gap-y-4 mt-4 xl:px-40 lg:px-6 px-4 mx-auto max-w-[calc(120rem)]
    }
}

If you have reached this far, Congratulations! you now have some basic idea on how to make a mobile responsive app using Tailwindcss, the advantage of Tailwindcss with its utilitiy approach makes writing styles much more faster compared to traditional CSS, Tailwind may not be for everybody but for some it can boost productivity and can code an MVP much faster.

Checkout more of my posts to learn more about mobile responsive design.

Table of Contents

Introduction
Prerequisites
Initializing
Screen Responsive Breakpoint Guide
Screen Paddings

Mobile Screen Padding
Tablet Size Screen Padding
HD Screen Padding
FHD Screen Padding

Content Layout
Summary