如何禁用 Tailwindcss-v3 中的内置 JIT

Question

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

那么如何禁用 JIT 来包含所有可能的 CSS 呢./dist/tailwind.css？

Answer 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",
        ],
    },
],