Modifiers allow you to only apply some specific Tailwind class if another condition happens.

One is hover: to apply a class only if you’re hovering the element with the mouse.

For example: hover:underline

The dark: modifier is super useful for applying dark mode.

You set any “base” class, for example bg-white, and then say dark:bg-black to “override” the first one in dark mode.

Modifiers are also super useful with responsive design, as you’ll see in the next lesson.

Lessons in this unit:

0:	Introduction
1:	Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	▶︎ Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	Setting up Tailwind CSS on Vite
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	The Tailwind Cheat Sheet
14:	How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind