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
.
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 :)
Top comments (9)
Awesome tutorials!
Tailwind just dropped its JIT feature for better performance:
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?
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 :)
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.
That might be the case! I haven’t used it yet so can’t give you the information you need.
Great work. But why everyone is moving to tailwind and not bootstrap?
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.
Its true what you said Bootstrap is too bloated.
Got it. Thanks