How to Change Selected Text Background in TailwindCSS

Working with different background colors for web pages, you may run into problems when the default background color for text selection matches with web page color. This is very annoying for the users because the selected text doesn’t get highlighted. TailwindCSS provides :selection modifier to change the background of selected text.

Using :selection Modifier in TailwindCSS

You can use :selection modifier to change both, the background and text color when the user selects some text on the page. The following code example demonstrates how to use :selection in TailwindCSS. Here is an online demo of the example.

The above code will change the selected text background color like below.

How to change selected text background color in tailwindcss


The :selection modifier helps to change the background as well as the text color of the selected text. This is useful when you are using different background colors on the web page and the default selection color doesn’t work well.



Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles