Angular 15 Material结合TailwindCSS时输入框聚焦Bug求助

问题现象 #

聚焦前：

聚焦后：

使用 Angular Material 15 搭配最新版 TailwindCSS 时，输入框聚焦后出现样式异常，输入框的轮廓样式被破坏。

问题原因 #

TailwindCSS 的 @tailwind base 指令会引入全局基础样式重置（Preflight），其中对 input 元素的 outline 属性做了默认设置，直接覆盖了 Angular Material 组件自带的聚焦状态轮廓样式逻辑，导致显示异常。

可行解决方案 #

方案1：调整样式加载顺序 #

将 Angular Material 的主题样式放在 Tailwind 基础样式之前加载，让 Material 样式拥有更高优先级。修改 styles.scss：

// 先导入Angular Material主题
@import '@angular/material/prebuilt-themes/indigo-pink.css';

// 再导入Tailwind样式
@tailwind base;
@tailwind components;
@tailwind utilities;

// 原有全局样式
/* You can add global styles to this file, and also import other style files */
[...]

方案2：禁用Tailwind的全局基础样式重置 #

在 tailwind.config.js 中关闭 Preflight 功能，避免 Tailwind 覆盖原生和 Material 的基础样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  corePlugins: {
    preflight: false,
  },
  plugins: [],
}

注意：关闭 Preflight 后，Tailwind 不再提供全局样式重置，可能需要自行处理部分元素的默认样式。

方案3：针对性覆盖冲突样式 #

如果不想完全禁用 Preflight，可以在全局样式中添加针对性 CSS，恢复 Material 输入框的聚焦样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 修复Angular Material输入框聚焦样式 */
.mat-mdc-form-field-focus-overlay {
  opacity: 1 !important;
}
.mat-mdc-form-field-outline .mat-mdc-form-field-outline-thick {
  color: var(--mdc-outlined-text-field-focus-outline-color) !important;
}

方案4：自定义Tailwind基础样式层 #

通过 Tailwind 的 @layer base 指令，专门为 Material 输入框调整基础样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input.mat-mdc-input-element {
    outline: none !important;
  }
}

验证步骤 #

修改完成后，重启项目：

ng serve

测试输入框的聚焦状态，确认样式恢复正常。

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