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.
Instructor: [00:00] Tailwind's breakpoints are defined in the screen object in the config file. By default, you have small, medium, large, and extra large breakpoints. The properties in this object generate prefixed utility classes that target specific media queries.
[00:14] Here's an example. To apply a white color to the text on the small breakpoint, the class would be .sm then a colon followed by the utility class you want to apply. .md:text blue would apply blue text on medium and up.
[00:32] The utility classes are generated in a specific order, meaning that classes for large breakpoints will always override classes targeting smaller ones. This is a good practice of mobile-first CSS architecture.
[00:45] Here's a section with a light purple background applied globally. Let's split it on multiple lines for readability. We'll add some responsive classes. Let's target the small breakpoint and change the background to pink-light. We'll also change it on the medium breakpoint. Let's make it green. Finally, we'll make it blue on large screens.
[01:05] You can see the utility classes overriding the background color at their respective breakpoints, first pink, then green, and then blue. Pretty cool. By default, breakpoint values specify minimum widths. Anything wider than this value will be targeted.
[01:22] You can be more specific with your breakpoints. Let's create a range property here. We'll give it an object. We'll have min property of 500 pixels and a maximum width of 700 pixels. I'll quickly run Gulp to run the config file through PostCSS. Let's see if that works.
[01:40] I'll target the range breakpoint and apply the border black class as well as a border bottom level eight. Whenever we enter a mean of 500 pixels, we should see a black border on the bottom of our section. Here it is. Now, it should go away as we reach 700 pixel width. Excellent.
[01:59] You can be even more specific with your breakpoints. Say you want to pass multiple ranges. You can define an array in your property. Let's call this one skip. For the first index in this array, we'll copy our range here. The second index will be an object with a min value of 900 pixels.
[02:14] Let's recompile our config file once again. This time, we'll style the paragraph heading. At the skip media query, let's make the text in upper case characters. The upper case should be applied between 500 and 700 pixels and then again from 900 pixels and up.
[02:34] Keep an eye on our paragraph title now. As we enter the first range, it's upper case. Then back to normal. Once we reach 900 pixels, it's back to upper case.