Tailwind 底座移除边框和填充

Question

我目前正在使用 PrimeReact 的日历组件开发一个项目，并且遇到了边框和填充似乎丢失的问题。我的公共文件夹中有一个 theme.css 文件，因为我希望网站允许动态主题切换。该文件在该部分中导入。

但是，如果我直接从 PrimeReact node_modules 文件夹导入主题 CSS，则内边距和边框会正确显示。

我尝试过的一件事是从 globals.css 中删除 Tailwind 的基本样式，当我这样做时，填充和边框会重新出现，但显然，这会破坏其他组件的样式。当我检查日历组件时，它显示首先应用了 Tailwind 的基础层，然后是 PrimeReact 的样式。

如何解决 Tailwind 的基本样式和 PrimeReact 的主题之间的冲突？

全局.css

@layer primereact, tailwind-base, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

Answer 1

您是否尝试过以不同的顺序应用样式？我会尝试像这样调整图层顺序：

@layer tailwind-base {
  @tailwind base;
}

@layer primereact {
  @import 'path/to/primereact/theme.css';
   or
  @import primeract;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

我想通过这样做，primereact 应该优先于 tailwind。