Tailwind CSS边框和分割线失效了，究竟是什么原因？

来源：语言推理作者：沙月恵奈‌头衔：网络博主

导读：本期聚焦于小伙伴创作的《Tailwind CSS边框和分割线失效了，究竟是什么原因？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《Tailwind CSS边框和分割线失效了，究竟是什么原因？》有用，将其分享出去将是对创作者最好的鼓励。

在项目中用Tailwind CSS写界面时，不少人发现加了border或者divide类，页面上却看不到边框和分割线。这个问题通常不是框架本身有bug，而是使用方式或配置上出了偏差。只有搞清楚Tailwind生成样式的逻辑，才能对症下药。

为什么border类没有边框效果

Tailwind里的<code>border</code>在很多版本中只是设定边框宽度，并不包含颜色。如果你只写了如下代码：

<div class="border">内容</div>

在较早的Tailwind版本中，border默认宽度是1px但颜色继承自当前文字色，如果文字色是透明或和背景一样就看不见。更常见的是新版本要求显式指定颜色：

<div class="border border-gray-300">内容</div>

另外，如果只写border而没有加载基础样式，或者CSS构建时没有扫描到该文件，类根本不会生成。

divide用于在有多个子元素的父容器里，自动给子元素之间加分割线。它必须作用在父元素上，且子元素是直接相邻关系：

<ul class="divide-y divide-gray-200">
  <li>项目一</li>
  <li>项目二</li>
</ul>

若父元素没写divide-y或divide-x，或子元素被包裹在别的标签里，分割线就不会生效。

在tailwind.config.js中，content字段决定了哪些文件会被扫描生成类。如果路径写错，边框相关类不会进入最终CSS：

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"], // 若实际文件在views目录则扫不到
  theme: {
    extend: {}
  }
}

还有人扩展了theme却把默认borderColor覆盖为空，导致所有border颜色类失效。

有时改了代码但页面没变，是浏览器缓存了旧CSS，或构建工具没重新跑。可尝试硬刷新，或检查构建命令是否包含Tailwind编译步骤。

按以上思路逐一排查，基本能解决Tailwind CSS边框和分割线失效的问题。

Tailwind_CSS border divide修改时间：2026-07-27 06:39:09

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。