TailwindCSS bg-opacity 在 React 中不起作用

Question

我正在尝试使用 设置登录部分的背景不透明度bg-opacity-75，但是当我将其添加到我的 className 中时，背景颜色就会消失。如果我使用opacity-75，所有子 div 都将是透明的，如果我使用opacity-100，背景颜色将消失，只有输入字段可见，它有点有线。另外，我正在使用tailwind.configtailwind v2.0.2 的默认文件。

这是我的代码：

...
        <div className={"h-screen w-screen py-10 lg:w-3/6"}>
            <div
                className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
                <Logo/>
                <Text/>
...

我也尝试过内联CSS，但仍然不起作用。 使用bg-opacity-75（输入后面应该有一个白色透明区域）

Answer 1

对于来到这里的任何人来说只是一个更新：从 Tailwind CSS 版本 3 开始，他们更新了新版本中不透明度类的工作方式。旧语法bg-opacity-75现已替换为新语法，并且该值直接应用于颜色类本身。

新语法将不透明度值附加到颜色，并用斜杠/分隔。例如，在 Tailwind CSS 版本 3 及更高版本中， bg-gray-800withbg-opacity-75看起来像这样：

className={"bg-gray-50/75 h-full max-w-md rounded-2xl shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>

Answer 2

不透明度

仅使用 opacity 关键字，适用于版本 2.2.7 Tails Wind

例子：

<div
className = "opacity-75 bg-red-300">
</div>