Tailwind 中可以使用边框图像吗？

Question

我正在尝试使用 Tailwind 任意语法将 border-image 属性合并到项目中，但我的样式没有被应用。我错过了什么吗？ Tailwind 可以做到这一点吗？谢谢！

我的代码：

<button className="[border-image:linear-gradient(to top right, #f6b73c, #4d9f0c) 30] border-4 border-solid border-transparent bg-white p-4"> Hello! </button>

Answer 1

是的，您错过了一些东西，而 Tailwind 是有可能的。考虑删除任意属性类中的任何可选空格，并使用下划线 (

_

) 转义基本空格。这是必需的，因为空格字符分隔类名称。

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<button class="[border-image:linear-gradient(to_top_right,#f6b73c,#4d9f0c)_30] border-4 border-solid border-transparent bg-white p-4"> Hello! </button>

Answer 2

我面临着类似的问题，所以我创建了一个插件来能够使用边框图像及其所有功能。

https://github.com/sebagnz/tailwindcss-border-image

希望有用。