Tailwind背景透明度

Question

我对tailwind背景透明度的CSS很好奇。我只能在纯CSS中找到'opacity'，但这会影响所有元素，而不仅仅是背景。请问有人能解释一下吗？

- r1a2k3i4b

---

请修改问题，将其限制为具有足够细节以识别合适答案的特定问题。 - Community

Answer 1

Tailwind 背景不透明度 影响了在颜色参数中使用的变量。Tailwind 使用 rgba(red, green, blue, opacity)，其中最后一个参数是颜色不透明度。

例如，.bg-black 的样式如下：

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(0,0,0,var(--tw-bg-opacity));
}

而 bg-opacity-50 看起来就像这样：

.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}

它重载了--tw-bg-opacity变量并导致了以下结果:

background-color: rgba(0,0,0,0.5)

- Jax-p

---

你是否了解这种方法的优点，而不是在.bg-black中不设置--tw-bg-opacity并在background-color中使用默认值，因为这样会使CSS不依赖于声明顺序。 - Oli Crt

Answer 2

请查看Tailwind文档中的此处。第二个数字表示不透明度。

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

- Joeboulton

---

天啊 0787，我怎么会错过那个！！ - Gogol

Answer 3

对于那些不想追加到他们的 tailwind.config.css 文件中的人来说：

<div className="bg-[rgb(255,0,0)]/50">

常见的错误是在逗号之间或括号内加入空格。

- mel3kings

Answer 4

在Tailwind CSS版本3.3.3中添加背景透明度的文档可以在这里找到。 你只需要指定颜色和透明度即可。

<button class="bg-sky-500/100 ..."></button>

如果你在使用任意的透明度数值，

<div class="bg-sky-500/[.06] ..."></div>

我有一个ReactJS项目，使用Tailwind v3.3.3，并根据上述方法添加透明度到扩展颜色，但对我来说没有起作用，所以我进行了一些调查并找到了解决方案。

我将我的颜色添加到一个名为colorPalette.js的文件中，如下所示：

export const darkThemeColorPalette = {
  "--primary-50": "7, 28, 51", // RGB values of the color
  // Rest of the colours should be added here with the above format
};

然后在 `tailwind.config.js` 中，

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "rgba(var(--primary-50))",
          // ADD THE REST OF THE COLORS HERE
        },  
      },
    },
  },
  plugins: [],
};

如您所见，颜色以rgba()格式提及。如果您没有指定不透明度，默认情况下将考虑1作为不透明度；而当您指定了不透明度时，将会将指定的值视为不透明度。

然后，我将颜色注入到根div中，如下所示：

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";

import { darkThemeColorPalette } from "./constants/common/colorPalette";
import Routes from "./Routes";

const App = () => (
  <div style={darkThemeColorPalette} className="">
    <Router>
      <Routes />
    </Router>
  </div>
);

export default App;

希望这能帮到你。愉快编码 :D

- Shakya Karunathilake