Composing CSS Utility Classes with Tailwind Course Introduction

Compile Tailwind to CSS with gulp

Create Custom Utility Classes in Tailwind

Apply mobile-first Responsive Classes in Tailwind

Style Elements on hover and focus with Tailwind’s State Variants

Change Styles on Multiple Elements with Tailwinds group-hover

Control What Variations are Generated for Each Utility Class Module in Tailwind

Keep Specificity in Check when Working with Tailwind

Extending Tailwind with Responsive Custom Utility Classes

Abstract Utility Classes to BEM Components in Tailwind

Create a Responsive Card Component by Composing Tailwind's Utility Classes

Customize Tailwind’s Naming Convention for Generated Utility Classes

Removing Unused CSS in Tailwind with PurgeCSS

Build User Interfaces by Composing CSS Utility Classes with 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.

Course

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Apply mobile-first Responsive Classes in Tailwind

Share this video with your friends