TailwindCSS — Make It Responsive
This week as I’ve been building a React site with TailwindCSS, I’ve been learning how to integrate the app with responsive design principles to create a seamless user experience despite screen size or platform.
Overall, I’ve found using Tailwind’s structure for responsive design to be increasingly intuitive and fairly painless, especially due to its utility-first configuration (and never having to leave HTML).
I soon discovered that the key methods to making a site responsive with Tailwind rely on the fact that Tailwind takes a mobile-first approach, meaning that all class styles default to mobile styling. To change any aspect (sizing, alignment, spacing, etc.) of an element, you need to declare the un-prefixed utility (for mobile viewing) and then prefix the changed utility according to breakpoint (small, medium, large, or extra large screens).
An example of having utilities at different breakpoints (notice the un-prefixed utility):
If you want to target a mobile screen, it is best practice to avoid the ‘sm’ breakpoint and instead specify the utility according to the larger breakpoints.
For example, to change the alignment of text on different screen sizes (and target mobile screens to have the “text-right” utility), I handled the change as follows:
Specifying utilities at different breakpoints overrides the mobile-first utility. To test the breakpoints out in real time, keep resizing your browser to ensure the chosen utilities are working as expected.
Additionally, if you’d rather refer to screen sizes using device names (instead of ‘sm’, ‘md’, etc.), you can edit your tailwind.config.js file as follows:
From my experience so far, TailwindCSS makes it easy and enjoyable to build responsive user interfaces that are much more customizable than popular frameworks like Bootstrap or regular old vanilla CSS, and I recommend giving this utility-first framework a shot for your next project.
