聚焦环不透明度不适用于任意值
Focus ring opacity not working with arbitrary value
我正在使用 Tailwind 3。我在我的文本输入上应用了一个焦点环,颜色是这样的:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />
这很好用,但是在我尝试对这个环应用不透明度后它失败了:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)] focus:ring-opacity-30" />
如果我不使用这样的任意颜色,这种不透明度效果很好:
<input type="text" className="focus:ring focus:ring-indigo-200 focus:ring-opacity-30" />
有什么想法可以让 ring-opacity
与任意值一起工作吗?
在你的第一个例子中:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />
我希望您的任意值被忽略。您看到的颜色(我怀疑是浅蓝色)来自默认值 focus:ring
。
Tailwind 任意值不适用于 rgb 或 rgba 值,this issue on Github exposed it and this pull was supposed to fix it but you can still see the behavior on Tailwind Play 很明显,使用任意 rgb 值时没有生成 class(如果有一个微小的色样会出现class).
旁边
目前最安全的方法是使用十六进制颜色而不是 rgb 或 rgba。
编辑:
正如 Tailwind 的创建者 Adam Wathan 所指出的 in this issue. Classes cannot have spaces per the docs. So the Tailwind Play example from above does work with whitespace extracted or replaced with underscores https://play.tailwindcss.com/xpPrMf5bO8。
我正在使用 Tailwind 3。我在我的文本输入上应用了一个焦点环,颜色是这样的:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />
这很好用,但是在我尝试对这个环应用不透明度后它失败了:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)] focus:ring-opacity-30" />
如果我不使用这样的任意颜色,这种不透明度效果很好:
<input type="text" className="focus:ring focus:ring-indigo-200 focus:ring-opacity-30" />
有什么想法可以让 ring-opacity
与任意值一起工作吗?
在你的第一个例子中:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />
我希望您的任意值被忽略。您看到的颜色(我怀疑是浅蓝色)来自默认值 focus:ring
。
Tailwind 任意值不适用于 rgb 或 rgba 值,this issue on Github exposed it and this pull was supposed to fix it but you can still see the behavior on Tailwind Play 很明显,使用任意 rgb 值时没有生成 class(如果有一个微小的色样会出现class).
旁边目前最安全的方法是使用十六进制颜色而不是 rgb 或 rgba。
编辑:
正如 Tailwind 的创建者 Adam Wathan 所指出的 in this issue. Classes cannot have spaces per the docs. So the Tailwind Play example from above does work with whitespace extracted or replaced with underscores https://play.tailwindcss.com/xpPrMf5bO8。