Getting started with Tailwind and React: Implementing responsiveness.

Hello folks,

In my last article, I explained how you can get started with Tailwind and React by creating a simple login form. In that, we started with a bare minimum form structure. In this article, let's work on the same login form and implement responsiveness.

Before we get started, this was the form which we developed earlier -

We had developed this considering only the desktop version of that form. But now the requirement comes and we need to make it responsive. The code for the above form looks like this -

import React from 'react';
import { PrimaryButton } from '../components/FormElements/Button';
import Input from '../components/FormElements/Input';

const Login = () => {
    const handleFormSubmit = (e) => {
        e.preventDefault();

        let email = e.target.elements.email?.value;
        let password = e.target.elements.password?.value;

        console.log(email, password);
    };

    const classes = {
        pageBody: 'h-screen flex bg-gray-bg1',
        formContainer:
            'w-full max-w-md m-auto bg-white rounded-lg border border-primaryBorder shadow-default py-10 px-16',
        formHeading: 'text-2xl font-medium text-primary mt-4 mb-12 text-center',
        btnContainer: 'flex justify-center items-center mt-6',
    };
    return (
        <div className={classes.pageBody}>
            <div className={classes.formContainer}>
                <h1 className={classes.formHeading}>
                    Log in to your account 🔐
                </h1>

                <form onSubmit={handleFormSubmit}>
                    <Input
                        id='email'
                        label='Email'
                        type='email'
                        placeholder='Your email'
                    />
                    <Input
                        id='password'
                        label='Password'
                        type='password'
                        placeholder='Your Password'
                    />

                    <div className={classes.btnContainer}>
                        <PrimaryButton type='submit'>
                            Continue with Email
                        </PrimaryButton>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default Login;

The classes object contains a list of all the classes applied to the below elements. Till now, we have very well understood that Tailwind is a utility first library and it has a class for every utility. We will be implementing responsiveness in a similar manner, by applying classes whenever required.

For any webpage, responsiveness is achieved considering the different breakpoints for the browser and Tailwind supports quite a good range of screen sizes, sufficient enough to add responsiveness to your site. Here is the list of breakpoints supported by Tailwind -

Though this list looks sufficient, Tailwind provides you different ways to customise the breakpoints by adding them to the tailwind.config.js file.

There are two ways you can add custom breakpoints to your project.
1- Overwrite Tailwind defaults and completely add your custom breakpoints.
2- Extend tailwind defaults and add the breakpoints which are not already included in the list.

For first approach, you can add the breakpoint list as below

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

For the second approach, you will add the breakpoints which are not already present in the default list. It will look something like this -

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

Pay attention to how we have added screen-list inside extend key of the tailwind theme object.

Apart from this, Tailwind provides even more customisations for breakpoints which you can read here. I am not covering them in detail in this article as I think the above mentioned points are good enough for most of the use-cases.

This was all about customisations and some basic properties of how Tailwind handles responsiveness. Now let’s try to understand the actual implementation of this. Tailwind will ask you to use mobile first approach while developing your page. In mobile first approach, we consider mobile devices by default and change only those properties which have different values on the larger screens.

For e.g. Suppose a font-size of a heading for a mobile device should be 1rem. So we will give 1rem as the default font-size to it and add 2.5rem as a font-size inside the media query for larger screens.

For the above page, we will just need to consider the form title for responsiveness as all other elements looks good in mobile devices as well. So for heading currently have font-size as text-2xl and for mobile devices we want to give apply text-lg. Hence we will modify the heading classes to look something like this -
text-lg lg:text-2xl font-medium text-primary mt-4 mb-8 lg:mb-12 text-center
Notice, we have also changed the bottom margin to make it look suitable for the small font size adapted for mobile devices.

This is one of the most simple approach you can use to implement responsiveness into your website. You may find Tailwind CSS messy initially as we are not used to adding such a huge class list to our html elements, but everything start making sense after you use it for a little while. Also for some more tips on Tailwind, there is a great article by

Jose Felix Follow

React Developer passionate in building clean user interfaces.

.

So that's it about responsiveness with Tailwind. If you follow some different patterns, please share them in comments section. I would love to hear about this too! You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning :)