添加TailwindCSS v3后Angular Material表单布局与占位符异常问题

问题现象 #

集成Tailwind CSS后，Angular Material组件样式出现异常，具体表现为：

• 输入框占位符被截断
• 文本框内出现多余线条

相关配置文件 #

style.scss #

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

tailwind.config.js #

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

解决方法 #

方法一：禁用Tailwind冲突的核心插件 #

Tailwind的base样式会重置表单元素的默认样式，与Angular Material的组件样式冲突。修改tailwind.config.js，禁用相关核心插件：

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

方法二：调整样式导入顺序 #

在style.scss中先导入Angular Material的主题样式，再加载Tailwind的指令，确保Material样式不会被Tailwind的重置样式覆盖：

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

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

原理说明 #

Tailwind的@tailwind base包含了对HTML元素（包括表单组件）的全局样式重置，这会覆盖Angular Material组件的预设样式。通过禁用冲突的插件或调整导入顺序，可避免两者样式冲突，恢复Material组件的正常显示。

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