UPDATE: use the *: variant (introduced in Tailwind 3.4 and still supported in v4).

It doesn’t happen often, but sometimes I wonder, how do I apply a style to a child element, with Tailwind?

The next time this happens, I’ll have this blog post explain it to me.

You can use this class to apply bg-gray-300 (for example) to all child elements of the current element:

*:bg-gray-300

Like this:

<div class="*:bg-gray-300">....</div>

The old arbitrary selector version also works if you need it:

<div class="[&>*]:bg-gray-300">....</div>

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