Responsiveness: what it is, how to test it, and how to implement it in TailwindCSS

Responsiveness is the ability of your website/component to be functional regardless of the screen size. Your component will adapt whether it is accessed from a computer, tablet, or mobile phone.

I am from Brazil and, nowadays, 62% of Brazilians access the internet only through their mobile phones (TIC Domicílios, 2022). Therefore, responsiveness is mandatory for any developed website. The benefits of having responsiveness on a website include:

• High-quality user experience regardless of the device used to access it (tablet, mobile, desktop…);
• Higher ranking in search engines.

Example:

The header component looks like this on desktop

Applying responsiveness, the component adapts to smaller screens and continues to offer a good user experience

Without applying responsiveness, the component does not adapt to different screen sizes and offers a worse experience for users who are not accessing the site on specific devices (in this case, those who do not access it via desktop have a worse experience)

🌐 Testing responsiveness and simulating other screen dimensions with devtools

Devtools are web development tools built into the browser. With them, you can debug, test, and analyze your page!

One of the features is the responsive design mode, which allows you to change the dimensions of your page to simulate how it would look on different devices.

To open devtools:

Right-click on the page -> Inspect

To open responsive mode:

After opening devtools, click the mobile-shaped button in the upper right corner

In this mode, you can define the screen size, drag it, or choose a specific device to see how your site would look at that resolution

This way, you can test the responsiveness of your component by simulating how it appears on a mobile phone (small screen), tablet (medium screen), or other devices with different screen sizes. Our goal is that it never breaks!

👩‍💻 Implementing responsiveness with TailwindCSS

In Tailwind CSS, responsiveness is implemented through the use of prefixes on classes. These prefixes are applied for specific breakpoints (or "screen sizes").

Tailwind provides some standardized values for specific screen sizes, but you can use arbitrary values if you prefer.

In addition, Tailwind adopts the mobile-first principle. This means that properties defined for a given breakpoint will affect that breakpoint and all larger screen sizes.

If you add a black background with the md: prefix, it will be applied on screens of size md, lg, xl, and 2xl.

Example: if we want to apply a red background by default, but change it to blue on medium-sized screens (md) and to yellow on extra-large screens (xl), we use the following syntax:

<div class="bg-red-400 md:bg-blue-500 xl:bg-yellow-500">
  Test
</div>

The background will be red by default. If the screen dimension is md (the breakpoint we defined with the prefix) or larger (e.g., lg), the background will be blue. But if the screen is xl or larger, the background will be yellow.

You can use this with all Tailwind tags and properties (changing the number of columns in a grid when the screen is smaller, changing the margin at different screen sizes, changing visibility depending on the screen size, among others…)! Just add the prefix :)

⚠️ For properties to be applied on mobile screens, do NOT use the sm prefix! Because properties will be applied from 640 px onwards, not be applied to smaller dimensions.

When developing for mobile screens, do not use prefixes for items that affect the small screen and, on larger screens, override with the prefixes

Read more about it: https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens

🎯 Where to start?

If you don't know how to start thinking about responsiveness in your component or site, here are some guidelines:

1. Set the page to a mobile resolution using devtools
2. List what you think is not responsive (e.g., margin too large, button breaking, component going off-screen)
3. See which tags and properties relate to this in the code and what the ideal value would be, so it doesn't break at the screen size you are using
4. Set the old value for a larger breakpoint (e.g., md)
5. And repeat these steps for md, lg, and xl screens!

Remember, at the end, to test dragging the screen at different sizes to make sure it never breaks!

📚 Recommended materials

• Google course on responsive design concepts (not related to specific technologies): https://web.dev/learn/design

• Tailwind documentation on responsive design: https://tailwindcss.com/docs/responsive-design