Create semi transparent background in TailwindCSS
Question:
How to create semi transparent background in TailwindCSS? Answer:
<div class="bg-slate-400/70">Lorem ipsum</div>
Description:
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);
}
Reference:
Tailwind opacity modifier syntax
Share "How to create semi transparent background in TailwindCSS?"
Related snippets:
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS
Tags:
tailwind, opacity, transparent, semi-transparent, background, color, bg, bg-opacity Technical term:
Create semi transparent background in TailwindCSS