Create semi transparent background in TailwindCSS

<div class="bg-slate-400/70">Lorem ipsum</div>

TailwindCSS version 3 introduces a new method for specifying transparency. 

The old version was bg-opacity-{value} for the background color. This can still be used, but the recommended syntax is bg-color/{value} . The new syntax works for all color utility classes.

Example:

In case of the following code

<div class="bg-slate-400">Lorem ipsum</div>

the CSS looks like this:

.bg-slate-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity));
}

If we add transparency to the background color:

<div class="bg-slate-400/70">Lorem ipsum</div>

then the CSS will be:

.bg-slate-400\/70 {
    background-color: rgb(148 163 184 / 0.7);
}