How in Tailwind CSS to use classes with arbitrary values

stckvrw Published at Dev

43

stckvrw

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

Dhilip H

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));
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-19

Comments

0 comments

Login to comment

Related

how to use calc() in tailwind CSS?

How to use SCSS with Tailwind css?

Tailwind arbitrary background-position values

Use Sveltekit and Tailwind CSS

Use Color in TailWind CSS

Tailwind CSS is not outputting classes for the background

How to convert use transform css property into tailwind css?

How to use Tailwind CSS in React to configure Create React App?

How to use layout variants in tailwind-css using jit?

Tailwind transition delay arbitrary value only working for specific values

TailwindCSS arbitrary values don't work in default redwood and tailwind install

Using arbitrary runtime strings for Tailwind CSS class positioning

Tailwind CSS not loading custom classes on React app

Add spacing in between items with css tailwind classes

Using Tailwind opacity classes with CSS variables

Tailwind css purge removes all dark classes

Color classes of Tailwind CSS not working when appended

Tailwind css classes not showing in Storybook build

Tailwind css 3.0.5 classes is not working with react

use tailwind classes into styled-components

How to use an arbitrary vector for alpha values in ggplot2

How to use arbitrary length sequences of values as map keys in Go?

How to use default values and arbitrary arguments at one function call in Python?

How do you add Tailwind CSS classes to the <html> and <body> tags in Nuxt 3?

PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?

How to group clases in CSS - Tailwind

How do I use CSS to select for a tag with arbitrary name attribute?

Tailwind css - use className custom spacing value as variable for tailwind config

How to use props variables in Tailwind?

TOP Ranking

Article

HotTag

Archive