添加未在 TailwindCSS 内容中使用的 CSS class

Question

这是我的 tailwind.config.js:

module.exports = {
  content: ["./Views/**/*.{cshtml,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
  ],
}

现在我有一个 class input-validation-error，它在运行时动态添加，因此在 TailwindCSS 的 content 部分列出的文件中不可用配置文件。

如何将此 class 添加到 JIT 生成的 CSS 文件中，因为 JIT 是 TailwindCSS 3 中的默认设置？

Answer 1

您可以将 class(es) 添加到保存列表。

module.exports = {
  content: ["./Views/**/*.{cshtml,js}"],
  safelist: [
    'your-class',
    'your-class', 
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
  ],
}

添加未在 TailwindCSS 内容中使用的 CSS class

Add CSS class that's not used in content with TailwindCSS

tailwind-css