tailwindcss 在我的 Angular 项目中打破了我的一些风格

Posted 2023-03-07

【中文标题】tailwindcss 在我的 Angular 项目中打破了我的一些风格

【英文标题】：tailwindcss breaks some of my styles in my angular project

【发布时间】：2021-06-27 07:37:23

【问题描述】：

我刚刚将 tailwindcss 2.0.4 添加到我的 Angular 11.2.6 项目中。

在我安装并添加了必要的导入之后，页面的外观不一样了。

比如这个按钮：

添加tailwindcss之前的样子：

使用 devtools 后，我注意到一些样式已从名为“base.css”的文件应用到此按钮，该文件是 Tailwind 添加到项目中的样式表。

当我删除与 base.css 文件关联的所有样式时，我的所有按钮样式都恢复到原来的样子。

处理这个问题的正确方法是什么？我需要去更改 base.css 文件吗？我可以这样做吗？还是有更好的方法来处理覆盖 base.css 样式？

【参考方案1】：

Tailwind 会重置一些默认浏览器样式，以使它们在所有浏览器中保持一致。完整列表可以在here 找到。要禁用此行为，您可以将以下 sn-p 添加到 tailwind-config.js。

// tailwind.config.js
  module.exports = 
    corePlugins: 
     preflight: false,