Tailwind CSS 中有哪些选项可将样式应用于预构建组件的自定义类？

Question

我在 MERN 项目中有一个文本编辑器，我试图更改其 UI 部分的 z-index（最终是颜色），但找不到让我高兴的方法。

有一个明显的解决方案，使用样式表中的选择器访问类：

@layer utilities {
    .tox.tox-silver-sink.tox-tinymce-aux {
        z-index: 100000 !important;
    }
}

但对我来说，将样式放在不同的文件中并使用传统的 CSS 有点违背了使用 Tailwind 的主要目的。

是否有任何选项可以避免该问题并将所有样式保留为组件的

className

？

Answer 1

如果您的组件允许，您可以尝试将重要标志添加到组件的 className 属性中，例如

!z-40

所以它优先于其余的。

MDN 文档说，此标志用于使单个属性和值对成为最具体的规则，从而覆盖级联的正常规则，包括正常的内联样式。