Angular Material（SCSS）与Tailwind CSS冲突，部分样式类失效如何解决？

问题现象 #

在采用SCSS作为预处理器的Angular项目中，先安装Angular Material再集成Tailwind CSS后，出现部分Tailwind样式类（例如mt-60）无法生效的情况，但多数其他Tailwind样式类可正常使用。

排查过程 #

为定位问题根源，搭建两个测试项目对比验证：

• 测试项目1：先安装Angular Material（指定SCSS）再安装Tailwind CSS，成功复现部分样式类失效的问题；
• 测试项目2：操作步骤与前者一致，但将预处理器改为CSS，所有Tailwind样式类均能正常生效。

由此确认问题源于SCSS环境下，Angular Material的样式优先级高于部分Tailwind样式类，导致样式被覆盖。

解决方案 #

在项目根目录的tailwind.config.js配置文件中，添加important: true配置项，提升Tailwind CSS样式的优先级，解决样式覆盖问题：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  important: true // 添加该配置项
}

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