必须用 tailwindcss/plugin + addutilities 注入自定义边框类，否则无法支持响应式、深色模式、hover 等变体；直接写 css 或任意值语法不被 tailwind 按需生成机制识别。
不能直接用 border-[2px_dashed_#6b7280] 这类任意值写法来添加自定义边框样式，除非你明确配置了 experimental.optimizeUniversalDefaults: true 并放行了 content 安全策略——生产环境极不推荐，生成不可控且体积膨胀。
用 plugin + addUtilities 注入安全的自定义边框类
这是唯一能保证响应式、深色模式、hover 变体等能力正常工作的做法。Tailwind 的按需生成机制只认它扫描到的类名字符串，手写 CSS 或裸对象导出都会被忽略。
- 必须用
tailwindcss/plugin包裹函数，否则addUtilities和theme()不可用 -
addUtilities接收扁平对象，不支持嵌套或伪类（如&:hover），这类需求该用addComponents - 要支持响应式，得手动展开媒体查询键，例如
'@media (min-width: 768px)': { '.md\:border-dash-3': { ... } }（注意冒号前双反斜杠转义） - 要支持深色模式，得显式组合选择器：
'.dark .dark\:border-dash-3': { borderStyle: 'dashed', borderWidth: '3px', borderColor: theme('colors.gray.700') }
为什么不能直接写 CSS 类？
Tailwind 构建时只提取 content 配置路径下 HTML/JSX 模板中出现的类名字符串。你在 styles.css 里写 .border-dash-3 { border: 3px dashed #6b7280; }，但模板里没写 border-dash-3，这个类根本不会进最终 CSS 文件。
- 即使写了，也绕过了 Tailwind 的变体系统：
sm:border-dash-3、hover:border-dash-3、dark:border-dash-3全部失效 - 颜色无法复用
theme('colors')，硬编码颜色值导致主题切换困难 - 宽度值若依赖
theme('borderWidth')，必须先在theme.extend.borderWidth中声明，否则theme()返回undefined
想支持动态参数（比如任意 dash 宽度）怎么办？
硬编码所有可能的组合（border-dash-1、border-dash-2…）不可维护。改用 matchUtilities：
- 正则匹配类名，例如
/^border-dash-(d+)$/提取数字部分 - 传入处理函数，返回完整样式对象：
{ borderStyle: 'dashed', borderWidth: `${value}px` } - 设置
supportsVariants: true才能让hover:border-dash-3生效 - 记得在
content数组中覆盖所有使用该类的文件路径，否则匹配不到、不生成
别踩 border-dashed 的隐形陷阱
border-dashed 只设 border-style: dashed，不设宽度和颜色——浏览器默认 border-width: 0，所以加了也看不见。必须搭配 border-2 和 border-gray-400 等类一起用。
- 方向限定类如
border-t-dashed同样需要配border-t-2和border-t-gray-400 - 别混用
border-dashed和border-t-dashed：后者会覆盖前者，且只作用于上边 - 响应式写法容易漏重置：写了
sm:border-dashed，但没写md:border-solid，结果中屏以上还是虚线
真正麻烦的不是写法本身，而是忘记 content 路径没覆盖插件类的使用位置——配置全对，类就是不生成，查半天才发现是这里漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
