如何在 Tailwindcss-v3 中禁用内置 JIT答案

【问题标题】：How to disable built-in JIT in Tailwindcss-v3如何在 Tailwindcss-v3 中禁用内置 JIT
【发布时间】：2022-01-15 00:08:01
【问题描述】：

由于我的一些 html 来自数据库，一些使用的 CSS 类在构建时没有出现在 HTML 文件中npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css。

那么如何禁用 JIT 以在 ./dist/tailwind.css 中拥有所有可能的 CSS？

【问题讨论】：

标签： css tailwind-css jit

【解决方案1】：

在 V3 上默认启用即时引擎或 JIT，我们没有键值可以放在我们的 tailwind.config 文件中来禁用它（至少现在是这样）。他们建议的方式是使用安全列表类 https://tailwindcss.com/docs/content-configuration#safelisting-classes 如果您知道哪些类是，或者至少是模式，您可以在安全列表中声明它们。

safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
]

如果你想拥有所有可能的 CSS，你可以试试这个，但它会生成一个巨大的 css 文件（大约 20M），但也许你可以根据需要调整它。

safelist: [
    {
        pattern: /.*/,
        variants: [
            "first",
            "last",
            "odd",
            "even",
            "visited",
            "checked",
            "empty",
            "read-only",
            "group-hover",
            "group-focus",
            "focus-within",
            "hover",
            "focus",
            "focus-visible",
            "active",
            "disabled",
        ],
    },
],

【讨论】：

请对您的代码应用格式