Why is there a back slash in tailwind css class names?

Question

I am trying to learn and use a new utility framework which is getting very popular these days. TailwindCSS

When I compiled my css using the instructions in the docs, I saw a lot of css class names have colon : in them and it is preceded by a back slash \

Why is that? Is that to make CSS understand that there is a : there and not to escape it?

Answer 1

Tailwind uses class names with colons as part of its support for Responsive Design. In particular, a class name such as

tablet:bold

Means that the properties defined in the class bold should be applied but only if the media matches the media query defined as tablet.

A colon is a perfectly valid character in an HTML5 class name. It is, however, a reserved character in a CSS selector. So, if you want to select elements with a class whose name contains a colon, you need to escape the colon.

So, if you have HTML like this:

<p class="one:two"></p>

And you want to select that element, the corresponding query selector would be something like:

.one\:two