Tailwind CSS中--border-style-*为何无法通过@theme自定义？

在Tailwind CSS里，--border-width-*命名空间可以通过@theme声明自定义值，生成如border-md这类工具类，但同样的方式用在--border-style-*上完全无效——自定义的border-inset、border-custom工具类不生效，而边框宽度的自定义却正常工作。

原因分析 #

Tailwind的@theme命名空间并非对所有CSS属性都开放扩展：

• --border-width-*属于可扩展的设计尺寸变量，Tailwind内置了对这类变量的解析逻辑，会自动根据变量生成对应的工具类；
• 而border-style的工具类是基于预设的枚举值（solid、dashed、dotted等）生成的，框架并没有开放通过--border-style-*变量扩展新样式的机制，所以直接定义这类变量不会触发工具类的生成。

正确解决方法 #

要自定义border-style工具类，需要通过@layer utilities来手动创建：

1. 自定义单个边框样式 #

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --border-width-md: 20px; /* 正常工作 */
  --border-width-xl: 30px; /* 正常工作 */
}

@layer utilities {
  /* 自定义inset边框样式工具类 */
  .border-inset {
    border-style: inset;
  }
}
</style>

<div class="flex">
  <div class="border-dotted border-md border-emerald-500 size-40 bg-emerald-100 m-2">dotted (working) & md (working)</div>
  <div class="border-inset border-xl border-sky-500 size-40 bg-sky-100 m-2">inset (now working) & xl (working)</div>
</div>

2. 自定义多值边框样式（四面不同样式） #

如果需要像dashed double none dotted这类复杂的多值样式，同样用工具类实现：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --border-width-md: 20px;
  --border-width-xl: 30px;
}

@layer utilities {
  .border-custom {
    border-style: dashed double none dotted;
  }
}
</style>

<div class="flex">
  <div class="border-custom border-md border-orange-500 size-40 bg-orange-100 m-2">custom (now working) & md (working)</div>
</div>

总结 #

@theme主要用来扩展Tailwind的设计系统核心变量（比如颜色、间距、尺寸等可复用的设计 tokens），而像border-style这类枚举型的样式，需要通过自定义工具类的方式来添加。

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