如何让Tailwind的outline样式与border默认颜色保持一致？

Tailwind 默认的 border 和 outline 工具类样式差异极大——border 是1px实线，继承默认边框色；而默认 outline 是2px透明实线+2px偏移，完全不是一回事。下面给出具体解决方法：

一、让outline类默认与border样式一致 #

要实现仅用outline就和border外观对齐，需要覆盖默认的outline工具类样式，同时复用Tailwind的默认边框配置，避免硬编码颜色。

在tailwind.config.js中添加自定义插件：

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      addUtilities({
        '.outline': {
          // 复用默认border的宽度
          outlineWidth: theme('borderWidth.DEFAULT', '1px'),
          outlineStyle: 'solid',
          // 复用默认border的颜色（自动取Tailwind配置的默认边框色）
          outlineColor: theme('borderColor.DEFAULT', 'currentColor'),
          // 取消默认偏移，让outline和border位置一致
          outlineOffset: '0',
        },
      })
    })
  ]
}

修改后，<div class="outline w-80 h-80 m-80"></div>的外观就和border类的元素完全一致了。

二、修复你之前的配置错误 #

你之前尝试扩展outlineColor没生效，问题有两个：

• --tw-border-color这个变量Tailwind根本没定义，直接调用肯定无效；
• 只加outline outline-primary时，默认的outline类是简写属性outline: 2px solid transparent，会覆盖你设置的outline-color，必须配合outline-width和outline-offset一起用：

<!-- 正确用法 -->
<div class="outline-1 outline-offset-0 outline-primary w-80 h-80 m-80"></div>

如果想让自定义颜色的outline也和border对齐，确保在tailwind.config.js里正确扩展相关属性：

module.exports = {
  theme: {
    extend: {
      outlineColor: {
        primary: 'red',
      },
      // 添加上和border一致的1px宽度选项
      outlineWidth: {
        '1': '1px',
      },
      // 添加上0偏移选项
      outlineOffset: {
        '0': '0px',
      },
    },
  },
}

三、用outline解决网格双边框问题 #

如果是为了解决网格双边框，可进一步调整outline偏移，让相邻元素的outline重叠，自动合并成单边框：
修改插件代码中的outlineOffset为-1px：

outlineOffset: '-1px',

这样网格元素的outline会向内偏移1px，相邻元素的outline就会重叠，看起来和单边框完全一致，同时不会像border那样占据布局空间，完美解决网格双边框问题。

内容的提问来源于stack exchange，提问作者Nils