当Tailwindcss的preflight设为false时边框失效该如何解决？

当把Tailwind CSS的preflight设置为false时，边框样式失效的核心原因是：preflight默认会统一重置所有元素的边框样式（将border-style设为solid），禁用后浏览器默认的border-style为none，即便添加了border（设置边框宽度）和颜色类，也不会显示边框。

以下是几种可行的解决办法：

• 显式指定边框样式类
  直接给元素添加border-solid类，强制设置边框样式为实线，修改后的代码示例：

  <div class="border border-solid border-indigo-600"></div>
  

• 手动添加基础样式重置
  在项目的自定义CSS文件中，添加类似preflight的边框基础重置规则，覆盖浏览器默认样式：

  *, ::before, ::after {
    border-style: solid;
    border-width: 0;
  }
  

  这样设置后，后续使用border、border-indigo-600这类类时，就会正常显示边框。

• 自定义保留preflight的边框重置功能
  如果只是不想启用完整的preflight，但需要保留边框相关的重置，可以在tailwind.config.js中通过插件添加基础样式：

  module.exports = {
    corePlugins: {
      preflight: false,
    },
    plugins: [
      function({ addBase }) {
        addBase({
          '*, ::before, ::after': {
            borderStyle: 'solid',
            borderWidth: '0',
          },
        })
      }
    ]
  }
  

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