On brand text selection with the `selection` modifier

Styling the ::selection pseudo-element to match your brand color is a great way to bring extra delight to your designs!

Transcript

0:00 [0: 00] Looking at this agency website, we immediately get a really strong sense of brands and brand color. It's all the way to the company name. We have this nice purple everywhere on the project.
0:10 [0: 10] Everything looks great until we try to select some text. Honestly, that's a little bit of a let-down here. Let me show you how with just two utility classes, we can take this design to the next level and bring some delight.

0:23 [0: 23] You could do this anywhere. Here, I will go in the parent most div up here, but you can do that in the body tag as well. I will target the selection pseudo element and apply a class of bg, and use our brand color which is purple-600.

0:37 [0: 39] That's the first class. I'll also add selection.

: 0:41 [0: 42] text-white. Now, if the user tries to select some text, they will have a really pleasant surprise which looks much nicer. That was well-worth the effort.

More Tips