I recently came across a selector that caught my attention - .w-1/4. This class sets width to quarter in the Tailwind CSS framework.
Seeing a backslash in a class name was odd at first. Is it even valid? Turns out, it is.

There's a small gotcha. Defining the class name like .w-1/4 { ... } won't work.

So, how can we get class names like that?

Well, you have to escape the backslash with a forward slash.

For example,

.w-1\/4 {
  width: 25%;
}

<div class="w-1/4">Hello World</div>

But wait, that's not all.

We are not limited to just the backslash. You can do the same with almost anything which is a character from your keyboard!

Check this out,

.\%\@\% {
  ...
}

<div class="%@%">Hello World</div>

Conclusion

This implementation can come in quite handy and let you do selector names like sm:flex. Just make sure not to overdo it like in the later example.