Tailwind css mobile 首先覆盖其他媒体查询和类

Question

在一个角度应用程序（^13.*）中，我已经通过

安装并初始化了tailwindcss

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init

根据他们自己的文档。

起初，我对默认的移动优先类（例如：

p-2 mb-3

等）有问题，它们总是覆盖其他媒体查询，例如，如果我有一个

p-2 md:p-3

，在浏览器开发工具中，我总是会看到

md:p-3

被划掉，无论屏幕宽度。

所以我认为这可能与特异性有关，所以在tailwind.config.js中我将重要属性设置为true

module.exports = {
   important: true,
   ...
}

虽然这解决了媒体查询问题，但现在我遇到了 border 的问题，例如，如果我有

border border-blue-500

，原始

border

会覆盖边框颜色，因为

border

的默认颜色为

 #dee2e6

所以

border-blue-500

根本没有任何效果。

我认为这与 tailwindcss 应用 css 类的顺序有关。

我尝试重新安装 tailwindcss 但没有帮助。

如有任何帮助，我们将不胜感激。

Answer 1

显然这个问题的原因是在 styles.scss 中导入的一些默认样式覆盖了 tailwindcss 类，通过删除该特定导入，问题得到了解决。

我现在可能已经破坏了更多东西，但为了回答这个问题，这就是解决方案

Answer 2

只是想补充一点，对我来说，实际的解决办法是添加以色列的内容。通过将 important: true 添加到 tailwind.config.js 文件的 module.exports 中，我的样式问题得到了解决。

module.exports = {important: true, ...}