安装Tailwind/Flowbite后CSS输入框边框样式失效问题求助

你的问题确实和Tailwind、Flowbite的默认样式有关：

• Tailwind自带默认表单元素样式，会给<input>等元素添加border、border-gray-300等基础样式；
• Flowbite基于Tailwind开发，其输入框组件也会自带预设的边框、内边距等样式，这些样式的优先级可能高于你自定义的border-bottom，导致你的样式被覆盖。

下面是几种可行的解决方法：

方法一：用Tailwind类直接实现需求（推荐） #

放弃自定义CSS，直接用Tailwind的工具类组合出你要的效果，确保样式优先级匹配：

<input type="text" class="border-0 border-b border-black">

border-0会清除默认的全边框，border-b border-black设置底部边框，Tailwind的类优先级足够覆盖默认样式。

方法二：禁用Tailwind全局默认表单样式 #

如果你不需要Tailwind对所有表单元素的默认样式，可以在tailwind.config.js中关闭form核心插件：

module.exports = {
  corePlugins: {
    form: false,
  },
  // 其他配置...
}

注意：这会禁用所有表单元素（input、select、textarea等）的Tailwind默认样式，适合全局不需要默认表单样式的场景。

方法三：提升自定义样式优先级 #

如果必须保留自定义CSS，可以通过以下方式提升优先级：

1. 使用!important标记（尽量少用，仅在必要时）：

.login-input {
  border: none !important;
  border-bottom: 1px solid black !important;
}

2. 使用更具体的CSS选择器，比如结合父元素类：

.login-form .login-input {
  border: none;
  border-bottom: 1px solid black;
}

3. 用Tailwind的!前缀强制提升类优先级：

<input type="text" class="!border-0 !border-b !border-black">

方法四：针对Flowbite组件样式覆盖 #

如果你用了Flowbite的输入框组件类（比如input），需要在组件类后面追加覆盖样式：

<input type="text" class="input border-0 border-b border-black">

Flowbite的组件类优先级和Tailwind类一致，后面的类会覆盖前面的样式。

排查小技巧 #

打开浏览器开发者工具的「Elements」面板，找到你的输入框，查看「Styles」标签：

• 找到被划掉的border-bottom样式，看上方覆盖它的样式来源（是Tailwind的基础样式还是Flowbite的组件样式），再针对性选择上面的解决方法。

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