Developing Responsive Website Efficiently Using Tailwind CSS

4 min readApr 21, 2024

Picture this: you’re comfortably surfing the web on your laptop when… uh-oh! your laptop runs out of battery and shuts down. Now, you have to use your phone to visit the same website only to find the website looks weird and uneven like it’s playing hide and seek with its content. Frustrating, right?

Unresponsive website on a phone vs on laptop.

From such scenario, we can highlight that it is mandatory to incorporate responsive design into website development. There is a principle in visual design, Nielsen’s usability heuristics, that is “visibility of system status”. In this principle, it is mandatory for designs to keep users informed about what is happening within the system at any given time.

However, it can be a lot of work as it involves coding for various screen sizes and resolutions. To avoid reinventing the wheel, you can use existing frameworks like Tailwind. To make a responsive website with Tailwind it will be very helpful to leverage existing classes and attributes that covers different screen sizes and by using containers that can easily adapt them as well.

Utilize Screen Class Sizes

If you are familiar with Tailwind, you may have used these classes.

sm: Small screens (tablets), min-width 640px
md: Medium screens (tablets), min-width 768px
lg: Large screens (desktops), min-width 1024px
xl: Extra-large screens (large desktops), min-width 1280px
2xl: Larger screens (large desktops), min-width 1536px

To use them, you can specify attributes using any of these classes. For example,

<div class=”w-full sm:w-1/2"></div> means the div’s width is displayed in half for screen with size 640px and above or full otherwise.

<div class=”w-full sm:w-1/2 md:w-1/4"></div> means the div’s width is displayed in half for screen with size > 640px and < 768px, displayed 1/4 for screen size 768px and above, or full otherwise.

This screen size classes can be used with every other attribute, such as colors, text sizes, and more. However, this screen sizes being used alone is still kind of a lot of work. So, I’m about to give you some tricks to it.

min and max Tags

Instead of specifying each breakpoint for each screen sizes, we can use max-[screen size] instead. For example, sm:max-xl:w-full means that for screen sm until xl, the width is set to full. For example,

text-6xl sm:text-6xl md:text-4xl lg:text-6xl xl:text-6xl

is the same as

text-6xl md:max-xl:text-6xl

And this is how the heading text looks like on sm, md, and xl screen.

display on different screen sizes for the above code.

Custom Screen Sizes

For specific screen sizes other than those built-in ones, you can also customize them in tailwind.config.js like so,

module.exports = {
  theme: {
    screens: {
      'xs': '320px', // Smaller screens
      'portrait': {'raw': '(orientation: portrait)'}, // Custom screen for portrait orientation
      'landscape': {'raw': '(orientation: landscape)'}, // Custom screen for landscape orientation
    },
  },
}

In above code, I specify new screen sizes for xs and screen orientations. You simply replace the regular screen size classes with your custom ones, for example: xs:bg-red-100, or portrait:w-1/2.

However, if you have custom screen sizes that are arbitrary and are rarely used, you can specify it inline by overriding the css like this,

<div class=”flex" style=”@media (min-width: 800px) { background-color: green; }”>

Use Flexbox and Grid

Flexbox

Flex and Grid are your best friend for providing containers in your code. Flexbox is used when you need to align things in a single axis, for example only horizontally or only vertically. Just as an example, this is how you would use it:
<div class=”container mx-auto flex flex-wrap items-center justify-between”>

In this code, I am specifying a container for the content of this horizontal navbar where the items are wrapped when overflowed using flex-wrap(although flex-wrap is unlikely to be used for navbar). It means the content will be shown when overflowing and the container height will be extended like so,

normal size (top) and shorter size (bottom)

There are a whole niche for flexbox and you can use it as you like such as flex-grow and flex-shrink to allow you to grow or shrink your component adaptably according to the container width they’re in.

Grid

On the other hand, grid is just how it sounds like. It grids the contents vertically and make it in rows and columns. Typically, you would specify it with grid-cols-x where x is the number of columns to be made. As an example, the code grid grid-cols-1 sm:grid-cols-2 means it shows grid with 2 columns for screen larger than sm and show only 1 column otherwise. It would result in this display:

These classes and attributes are tools to help you develop responsive website with less time and mental effort. By leveraging these will allow you to focus more on crafting a great user experience and less on writing repetitive CSS, resulting in faster development cycles.

References: