Using Symbols in CSS Selectors

If you have experience with Tailwind CSS or similar frameworks, you may have encountered selectors such as w-1/4. However, attempting to define a selector with a backslash in its name won’t work.

/* This is invalid */
.w-1/4 {
	width: 25%;
}

So, how does it work in Tailwind? Well, you can escape the backslash with a forward slash.

/* This is valid */
.w-1\/4 {
	width: 25%;
}

And use it in the HTML markup (without escaping like in CSS):

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

This technique is not limited to the backslash - you can use it with other symbols as well, for example:

.\%\@\% {
	/* ... */
}

Correspondingly, in the HTML document:

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

And that pretty much sums it up for this technique. I do recommend not going excessive with this one however like in the later example. Good luck.