CODEWITHSUNDEEP
csstailwind-cssjit
Mohammad Ali Akbari
Mohammad Ali Akbari

Reputation: 10395

How to disable built-in JIT in Tailwindcss-v3

As some of my html comes from database, some of used CSS classes are not presented in HTML file in time of build npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css.

So how can I disable JIT to have all possible CSS in ./dist/tailwind.css?

Upvotes: 5

Views: 1062

Answers (1)

Pablo Torterolo
Pablo Torterolo

Reputation: 33

just-in-time engine or JIT is enabled by default on V3 and we don't have a key value to put on our tailwind.config file to disable it (at least for now). The way they propose is use safelisting classes https://tailwindcss.com/docs/content-configuration#safelisting-classes If you know which classes are, or at least the pattern you can declare those on the safelist.

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

If you want to have all possible CSS you can try this but it will generate a huge css file (20M aprox) but maybe you can adapt it to what you need .

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

Upvotes: 2

Related Questions