使用@tailwindcss/forms插件时响应式border类不生效是什么原因

• 插件内置样式优先级覆盖
  @tailwindcss/forms 会为表单元素注入默认的重置样式，这部分样式的选择器优先级高于带断点前缀的工具类。基础border类和插件样式优先级处于同一层级，且工具类默认在插件样式后加载，因此可以正常覆盖生效；而带md:、lg:前缀的响应式类优先级不足，被插件默认样式覆盖导致不生效。
• 插件加载顺序错误
  如果在tailwind.config.js的plugins配置项中，@tailwindcss/forms的引入顺序晚于Tailwind内置工具类的相关配置，插件生成的样式会覆盖后续生成的响应式工具类，导致断点样式失效。
• 自定义配置冲突
  如果项目中自定义了md、lg等断点规则，或者修改了border工具类的生成逻辑，可能会导致响应式border类未正确生成，或是生成的选择器优先级不匹配，无法正常生效。

快速修复方案 #

1. 调整插件加载顺序，确保@tailwindcss/forms在plugins数组的最前面：

// tailwind.config.js
module.exports = {
  // 其他配置项
  plugins: [
    require('@tailwindcss/forms'),
    // 其他插件放在后面
  ]
}

2. 对响应式border类添加重要性修饰符，强制覆盖默认样式：

<div class="md:!border"></div>

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