Responsive Design-Tailwind CSS
Designing in any CSS framework or conventional CSS is incomplete without making it responsive in behaviour. Hence, every developer should have this practice of responsive designing.
Breakpoints in Tailwind CSS:
We already know that tailwind CSS comes with various utility classes for designing. Similarly, we have a few for the breakpoints and responsive design too. But before that, we will dive into the nature of Tailwind CSS in terms of responsive design.
Tailwind CSS by default uses the mobile-first breakpoint system, similar to that of in bootstrap framework. Hence we need to focus on the other breakpoint while designing our layout w.r.t to other breakpoints.
Different breakpoints in Tailwind CSS:
- sm:
Minimum width: 640px - md:
Minimum width: 768px - lg:
Minimum width: 1024px - xl:
Minimum width: 1280px - 2xl:
Minimum width: 1536px
Talking about the breakpoints, tailwind provides us with 5 predefined breakpoints that are mentioned above with their respective sizes.
<div class="p-8 flex flex-col bg-gray-800 items-center md:flex-row justify-center shadow"><img class=" rounded-full mb-5 md:mr-20 " src="https://randomuser.me/api/portraits/men/44.jpg" data-int="44" data-gender="men" class=" come_in"><p class="text-2xl font-semibold text-center text-gray-50">I will shift down in smaller screen size</p></div>
The above example shows the working of the breakpoints in Tailwind CSS. We have used the ‘md:’ class which defines the breakpoint styling for screen size of 768px and above. As tailwind is mobile first, so we didn't actually need to define anything with sm tag in this example. Few of the new utility classes used in this example are:
- flex-col: flex child items column wise.
- flex-row: flex child items row wise.
- text-center: centralize text.
- md: breakpoint for medium screen and above or 768 px and above.
This was all about the tailwind breakpoint one needs to know for the starters.
