顺风背景不透明度

Question

我对 tailwinds bg 不透明度背后的 CSS 感到好奇。我只能在纯 CSS 中找到“不透明度”，但这会影响所有内容而不仅仅是背景。有人可以解释一下吗？

Answer 1

顺风背景不透明度影响颜色参数中使用的变量。 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)

Answer 2

请参阅顺风文档中的此处。第二个数字表示不透明度。

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

Answer 3

对于那些不想附加到他们的

tailwind.config.css

：

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

一个常见的陷阱是在逗号之间或括号内添加空格。

Answer 4

在 Tailwind CSS 版本 3.3.3 中添加背景不透明度的文档位于 here。 您只需指定颜色，然后指定不透明度，

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

如果您使用任意值作为不透明度，

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

我有带有 Tailwind v3.3.3 的 ReactJS 项目，并根据上述方式添加不透明度来扩展颜色对我来说不起作用，我做了一些挖掘并找到了解决方案。

我将颜色添加到名为

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

Answer 5

您可以在 tailwind 配置文件中使用 alpha 值，如下所示： 在你的 CSS 中定义你的值，如下所示：

    :root {
        --primary: 182, 11, 195;
  --secondary: 193, 106, 241;
  --tertiary: 255, 109, 0;
    }

然后在你的 tailwind 配置中定义它们，如下所示：

theme: {
    extend: {
        colors: {
          primaryColor: "rgba(var(--primary), <alpha-value>)",
          secondaryColor: "rgba(var(--secondary), <alpha-value>)",
          tertiary: "rgba(var(--tertiary), <alpha-value>)", ... 

之后，您可以在代码中使用它，如下所示，它将在您的颜色上应用不透明度：

<Button variant="outline" className="border border-primaryColor bg-primaryColor/15">
         <FiPlusCircle className="bg-tertiary/70 text-secondaryColor/50" /> create new Task
  </Button>