Tailwindcss 某些类不可用

Posted 2023-03-06

【中文标题】Tailwindcss 某些类不可用

【英文标题】：Tailwindcss some classes not available

【发布时间】：2021-11-10 07:01:56

【问题描述】：

最近，我开始在我的项目中使用越来越多的 TailwindCSS。 从 Tailwind V2.2 开始，一些类（如兄弟选择器）被添加到现有类的整个列表中。

但是我有一个问题。当我尝试使用这些选择器时，它就不起作用了。 将 Tailwind 模式更改为 jit（即时模式）它们确实有效，但随后我丢失了所有其他尚未使用的类。

所以我应该做些什么来完成这项工作有点复杂 有什么建议吗？

【问题讨论】：

您需要提供更多信息，您的顺风配置是什么？通常，当您将类添加到 html 时，jit 模式会“及时”将类添加到 css。这似乎是问题所在。对于即时模式，在您的 tailwind.config.js 中正确配置“清除”非常重要。

@ixam 好吧，我的课程在 JIT 模式下正确添加。但我不想使用 JIT 模式...我想说的是我需要的类仅在 JIT 模式下生成，而在正常模式下不可用/工作..

您提到的兄弟选择器等某些功能仅在 JIT 模式下可用，see here。所以这就是你的问题所在。但总的来说，您应该更具体地提出您的问题。发布一个 exactly 类不起作用的 sn-p，发布您的配置，例如tailwind.config.js 等

【参考方案1】：

一种解决方法是在您的站点/应用程序的 HTML 标记中简单地包含完整的 Tailwind 构建（tailwind.css 3.6 MB 未压缩；在 node_modules/tailwindcss/dist 中可用）。

然后在您的生产构建过程中将其剥离；或用您的 tailwind cli 或框架将吐出的那个覆盖所述 tailwind.css（仅清除以包括您的项目中使用的类）

我和我的同事在使用使用 Tailwind 和 Vite 的最新 SvelteKit 时遇到了类似的问题；在尝试了几种方法后，我还没有找到一个基于配置的解决方案。