Flowbite CDN致输入框CSS异常：前两个样式被改，第三个正常

你遇到的问题核心是：Flowbite的CSS会对带有required属性的<input type="text">元素预设默认样式，且因资源引入顺序问题，Flowbite CSS优先级高于你设置的Tailwind样式，所以前两个带required的输入框样式被修改，第三个无required的输入框不受影响。

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

• 调整资源引入顺序（最推荐）
  将Flowbite CSS的引入放在Tailwind CDN脚本之前，让Tailwind生成的内联样式优先级更高，覆盖Flowbite的默认样式：

  <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- 表单代码保持不变 -->
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
  

• 强制提升Tailwind样式优先级
  给输入框的Tailwind类添加!前缀，强制覆盖Flowbite的预设样式：

  <input class="!border-b-2 !pr-3 !pt-3 !outline-none" type="text" id="username" required />
  <input class="!border-b-2 !pr-3 !pt-3 !outline-none" type="text" id="emailOrPhoneNumber" required />
  

• 结合Flowbite表单类使用
  改用Flowbite提供的表单基础类，再叠加自定义Tailwind样式，避免样式冲突：

  <input class="form-input !border-b-2 !pr-3 !pt-3 !outline-none" type="text" id="username" required />
  

以上方法都能保留Flowbite轮播组件的功能，同时让输入框恢复你设置的样式。

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