尾风背景容量

Question

我试图使用尾风为div应用背景不透明度，我已经尝试在类中进行，没有在 tailwind.js

<div class="expanded fixed inset-0 bg-black bg-opacity-50 w-full h-full flex items-start justify-center pt-12 z-10">
    <input type="text" class="border-r border-gray">
</div>

这只是显示一个黑色的背景，不透明度没有变化，所以我在一个自定义类中尝试了一下，以防后期处理需要做一些魔法。

.expanded 
    @apply bg-black bg-opacity-50

然而，这样做我得到了以下错误：

@apply 不能使用 .bg-opacity-50 因为 .bg-opacity-50 要么找不到

跑步 npm列表 显示我的尾风版本为1.4.1，应该可以找到这个功能。

+-- [email protected]
| +-- @fullhuman/[email protected]
| | +-- [email protected] deduped
| | `-- [email protected]
| |   +-- [email protected]
| |   +-- [email protected] deduped
| |   +-- [email protected] deduped
| |   `-- [email protected] deduped

Answer 1

如果你想降低背景的不透明度，你可以做以下操作。

<div className="bg-gray-200 hover:opacity-25"></div>

在尾风中没有bg-opacity-50选项。我使用的是1.3.5版本，我相信和你的版本差别不大。 相反，你可以使用以下选项。

opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

Answer 2

我99%确定是尾风的版本问题

这是你在《》中提到的黑色背景输出。[email protected] 輸出.............................................................................................................................................................................................................................................: https:/jsfiddle.nety9t76px1 图书馆使用的: https:/[email protected]

下面是50%透明的灰色背景（代码相同），在 [email protected] 輸出: https:/jsfiddle.netedg1oa2t 图书馆二手 。https:/[email protected]

你会得到下面的错误，因为bg-opacity是在1.4.0版本才引入的。

@apply 不能与 .bg-opacity-50 因为 .bg-opacity-50 要么找不到

这意味着您使用的是一个过时的库，请删除并重新安装尾风css库，然后再试。