顺风分割颜色仅适用于divide-x答案

【问题标题】：Tailwind divide color only for divide-x顺风分割颜色仅适用于divide-x
【发布时间】：2021-08-21 21:20:12
【问题描述】：

是否可以让divide-gray-600 只适用于divide-x？似乎没有divide-x-gray-600 选项。看看我是如何让第二个项目底部有红色边框的：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-stretch w-full divide-x divide-gray-600 text-center bg-gray-100">
  <div class="flex-1 border-b border-red-600 p-2">Red border bottom</div>
  <div class="flex-1 border-b border-red-600 p-2">Should have red border bottom</div>
  <div class="flex-1 border-b border-gray-600 p-2">Gray border bottom</div>
</div>

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

如果您使用的是 JIT 编译模式，per-side border colors 似乎即将加入 Tailwind。我不确定它什么时候发布，所以在我写这篇文章时，每边的边框颜色不可用。当它们确实可用时，您可以通过在中间 div 上应用 border-b-red-600 来解决您的问题。（如果您使用的是CDN installation method，这将不起作用。）

更新：现在可以在TailwindCSS v2.2 中使用每边边框颜色！

与此同时，或者如果您不使用 JIT，您可以编写自己的 border-color 实用程序或您自己的 divide 实用程序。

.divide-x-gray-600 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-right-color: rgba(75,85,99,var(--tw-divide-opacity));
    border-left-color: rgba(75,85,99,var(--tw-divide-opacity));
}

这不是很“顺风”，但应该可以。如果您想以更“顺风”的方式做事，您也可以write a plugin 为您生成它们。请记住，如果您不使用 JIT，您最终可能会得到一个更大的未清除 CSS 文件，因为您要为每种颜色生成另外两组实用程序。

【讨论】：

谢谢！我最终在第一个 div 中使用了第二个 div。顺便说一句，反对票是多少？
繁荣，包含在 v2.2 中！ :)
但看起来它仍然没有推翻分色。嗯。也许需要跳过使用divide并在每个子元素上设置侧边框颜色。谁能想到另一种解决方法？