TailwindCSS: Responsive Design

Hi there here is my next instalment of TailwindCSS (I'm loving dabbling around in it). Today I would like to talk about making your webpages responsive using TailwindCSS, I have found this a lifesaver as I really struggled with responsiveness using just CSS, so I hope if there is anyone else out there like me that your life can be made a little easier 😉

Introduction

Many of us that are learning are taught to use the mobile first approach, I guess it depends on how you want to build your site, there is no right and wrong it depends on you as an individual. The mobile first approach gradually adds styles to make it a web page to fill the biggest screen made, but starts mobile. The good news is for those that struggle is TailwindCSS is based on the mobile first approach, so your styling is applied to mobile screens and you add the breakpoints if you want to change something at a specific size. Time to dive in and show you how:

Breakpoints

• By default there are 5 defaults, which are common device resolutions

  • sm - with a minimum width of 640px
  • md - with a minimum width of 768px
  • lg - with a minimum width of 1024px
  • xl - with a minimum width of 1280px
  • 2xl - with a minimum width of 1536px

• You can in TailwindCSS customize your theme to add your own breakpoints, this is done in your tailwind.config.js file for example:

theme: {
   screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px'
   },

• These breakpoints can be whatever you want, then in your HTML file you just use the tablet, laptop, or desktop instead of the default sm, md etc.

• Using this you can also set larger or smaller breakpoint sizes.

• For making a larger breakpoint you can use the extend keyword in your tailwind.config.js file, this will leave all other breakpoints as defaults eg.

theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },

• For making the smaller breakpoints, you have to override the whole screens key by re adding the default breakpoints after your smaller breakpoint. This is because extend adds things to the end of your defaults. e.g.

theme: {
   screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px'
and so on

How to use the breakpoints

• Once you know what the breakpoints are whether they are customised or default you can then use them in your HTML file.
• To use them for a mobile you just add the style you want:

<div class="text-center"></div>

• This will centre text on all breakpoints starting with mobile

N.B sm does not mean small screens it means it is a small breakpoint. For instance:

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

• Use unprefixed utilities to target mobile and overide them at larger breakpoints

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

• To add a style that you only want to come in at a medium breakpoint you would use:

<div class="bg-blue-500 md:bg-red-200"</div>

• This would give you a mobile background colour of blue, and from medium screens and up (768px) a background colour of red. If you wanted all breakpoints to have a different colour for example you would just add the prefix before the style: lg:, xl:, 2xl: and any custom ones you have added.

• This works for any of the utilities in tailwind be it typography, colour, sizing, spacing, padding, borders etc etc.

Ranges in breakpoints

• You can use TailwindCSS to target breakpoint ranges, if you want to apply a style only when a specific breakpoint range is active there are responsive modifiers that can be used like md with a max-* to limit that style to a specific range:

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

so from medium to extra large not all other breakpoints.

• max can be used with all breakpoints: max-sm, max-md etc.

Arbitrary Values

• If you need to use a one off breakpoint in your work that doesnt make sense to include them in your theme, you can use the min and max modifiers to generate a custom breakpoint on the fly eg.

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

Final note

I hope you have found this article interesting as you can see TailwindCSS makes it a lot easier to make your webpage responsive, just by adding the breakpoints to the styles, making it much easier to build a mobile first approach page and just changing styles slightly to make it responsive. Thankyou for reading !