Add classes to Tailwind

📜 Safelisting classes

For the smallest file size and best development experience, we highly recommend relying on your content configuration to tell Tailwind which classes to generate as much as possible.

tip

If you need to have some default Tailwind classes and style rules for dynamic content that are not being used for the static content, you can add them into the safelist in tailwind.config.js. As a result, all the classes from the whitelist will be included to the final css bundle no matter of their usage.

Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.

If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use the safelist option:

tailwind.config.js
module.exports = {
    content: [
        './pages/**/*.{html,js}',
        './components/**/*.{html,js}',
    ],
    safelist: [
        'bg-red-500',
        'text-3xl',
        'lg:text-4xl',
    ]
// ...
}

One example of where this can be useful is if your site displays user-generated content and you want users to be able to use a constrained set of Tailwind classes in their content that might not exist in your own site’s source files.

info

Check official Tailwind docs