How in Tailwind CSS to use classes with arbitrary values

Question

I'm a newbie with Tailwind CSS. By the link https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support I see that we can use classes with arbitrary values like

class="bg-[#1da1f1]"

But browser doesn't see classes containing the characters [, ], # and so on.

So how to use them or how are they used in Tailwind? I don't get it

Answer 1

Characters like [,],# are escaped in the css selector. Reference - CSS classes with special characters

Like this -

.bg-\[\#333\] {
    --tw-bg-opacity: 1;
    background-color: rgba(51, 51, 51, var(--tw-bg-opacity));
}