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 learn how to target specific states of elements and apply styles only when those states are triggered.

Instructor: [00:00] Let's take a text link and a button. These look nice, but we should apply different styles on hover. In Tailwind, you can target hover states with the hover prefix followed by a colon. On hover, we want the text to be orange. 

[00:16] Let's do the same with the button. On hover, we want the button background to be black. Here we go. Let's style the focus state for our text link now. Let's give that a try. When I click on the link, the focus state styles are applied. When I click out, they are removed.

Course

Build User Interfaces by Composing CSS Utility Classes with Tailwind

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

Share this video with your friends