[Tailwind] Apply mobile-first Responsive Classes in Tailwind

In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also discover a couple of ways we can define custom media queries in the config file.

 

You can add more breakpoint for example:

  screens: {
    sm: "576px",
    md: "768px",
    lg: "992px",
    xl: "1200px",
    range: { min: "500px", max: "700px" },
    skip: [{ min: "500px", max: "700px" }, { min: "900px" }]
  },

 

Using it:

<p class="skip:uppercase">some text</p>