DEV Community

loading...
Cover image for Getting started with Tailwind and React: Implementing responsiveness.

Getting started with Tailwind and React: Implementing responsiveness.

Yogini Bende
Front End Developer| Javascript Enthusiast | ReactJS | ReactNative | TailwindCSS | CSS | Exploring AWS | Learning Node! | Follow on Twitter for daily updates
・4 min read

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 -
Login Page

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;

Enter fullscreen mode Exit fullscreen mode

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 -
Tailwind Breakpoints List

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) { ... }
    },
  }
}
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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

joserfelix image

.

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!!
Keep learning :)

Discussion (9)

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome tutorials!

Tailwind just dropped its JIT feature for better performance:

Collapse
aliwolfi profile image
aliwolfi

followed this installation step to configure tailwindcss in create-react-app. It works, but after adding tailwindcss/jit, app is not working. I think that it happens because create-react-app doesn't support PostCSS 8, but it seems that tailwindcss/jit requires PostCSS 8.

Any idea?

Collapse
ms_yogii profile image
Yogini Bende Author

Hey, I faced the same issue and Tailwind's documentation addresses this issue. Please check this link and follow the steps along. It solves the issue and you can run your project smoothly :)

Collapse
jebt28 profile image
Juan Baltierrez

I was can solve the issue, unfortunately not available to run react-script with tailwind jit mode in the same script, but if you run react-scripts start and tailwind in jit mode in separated scripts, both running without issues.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

That might be the case! I haven’t used it yet so can’t give you the information you need.

Collapse
haseebpyd profile image
Muhammad Haseeb

Great work. But why everyone is moving to tailwind and not bootstrap?

Collapse
ms_yogii profile image
Yogini Bende Author

Bootstrap will load unnecessary CSS into your project and also will not give you as much flexibility as Tailwind gives. I have been using Bootstrap for more than 3 years now and can tell this that while bootstrap you end up overriding styles a lot!! Which start getting messier when you are working in a fairly large team or on a large project. Tailwind is better in this case because it just gives you utility classes to define your own components opposite to bootstrap where you have to use their component.

Again, this all things end up at what you prefer over what. Both libraries have their own pros and cons, and both works best at their own place. This is one of the most debatable topics, but ultimately you have to prefer one best suiting your use-case.

Collapse
andrewbaisden profile image
Andrew Baisden

Its true what you said Bootstrap is too bloated.

Collapse
haseebpyd profile image
Muhammad Haseeb

Got it. Thanks