Tailwind Crash Course - Project Based Learning
Responsive Design
No modern application would be complete without a responsive design. So, let’s tackle a responsive design.
Let’s say, If we take class .bg-blue-500 which is just a background of blue 500, Tailwind actually makes it very simple to create that in a responsive way. All we need to do is add one of the breakpoints sm: in infront of it.
.bg-blue-500
⬇️
.sm:bg-blue-500
OR
.lg:bg-blue-500
(lg: is another breakpoint)
Responsive Breakpoints
| Breakpoints | Starts at |
| [ALL] sm: md: lg: xl: |
0px 640px 768px 1024px 1280px |
How would we use these and what are the classes that are available to us.
We’ve got quite a few. ⬇️
| Responsive Classes | |
| .sm:bg-* .sm:w-* .sm:h-* .sm:p-* .sm:m-* .sm:{display} .sm:flex .sm:flex-{col | row} .sm:border-{color}-{shade} .sm:border-{style} .sm:border-{width} .sm:rounded-{size} |
background color width height padding margin block, inline, flex, hidden... display flex flex direction border color border style border width border radius |
So let’s start with the more basic ones
I have a small sample code for us to work with. Here, I have given .bg-blue-500 to the body of our page.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-blue-500">
</body>
</html>Gif image here
See, nothing happens when we resize browsers.
Now let’s say I want to change my background colot at medium breakpoint. To do that, we simply add md: breakpoint (.md:bg-red-500) to the body and see the results.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-blue-500 md:bg-red-500"> <!-- adding md breakpoint -->
</body>
</html>Now if you resize the browser and break the medium point, you’ll see that the background will change to red. Check below:
GIF HERE
So, just like that, we are able to do responsive design. Now the way that we have written right now is not useful because most of the time, we are not going to change the background. So, let’s try to do things like padding. Let me show you an example of that.
We will create a div and add .p-4 and all some text inside of this div and then wrap-up this div.
<div class="p-4">Some text inside this div</div>It will give us a padding of 4. But it will look nice when it will give us a bigger padding when we get a bigger screen size.
For that we can add class .sm:p-32 to the same div.
<div class="p-4 sm:p-32">Some text inside this div</div>GIF here
Look how much padding we have now when we go to the bigger screen.
Now you get to the point. All of the classes were already learnt previously. All you just have to do is, add responsive breakpoints accordingly. And most of the classes you would want to be responsive, are responsive by-default.
Let’s keep reviewing what those are now!
Wrapping-up
To make any class responsive, we need to add a responsive breakpoint modifier in front of the class.
