[Question] Safelisting classnames

[DmiPet]

Amazing work on this, very excited to start using it!

One question that came up fairly quickly though, is, what is the best way to safelist class names that may be generated dynamically? The documentation mentions a safelist.txt file, but that doesn't seem to be doing the trick. Is it possible to have an example of what that file should look like, and whether any other configurations need to be set in order for it to take effect?

Thanks!

[beromir]

I think you need to add it to the purge configuration in your tailwind.config.js file to work.

purge: {
        content: [
            './safelist.txt',
        ],
    },

[DmiPet]

Ah, ok, thanks @beromir! And where would you specify the globs for files to be parsed, same section? So for NextJS, as an example, "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}".

And with the safelist.txt do you just have a class name on each line, or should they be comma-separated?

Appreciate your help!

[VicGUTT]

On a project I currently have it setup as:

purge: [
    './resources/**/*.js',
    ...
    './resources/assets/tailwindcss/purge-aware.txt',
],

And the contents of ./resources/assets/tailwindcss/purge-aware.txt:

bg-error-100
focus:ring-info-500
...

I image that should still work

[beromir]

@DmiPet I have the globs for the other files in the same section:

purge: {
        content: [
            './vendor/laravel/jetstream/**/*.blade.php',
            './storage/framework/views/*.php',
            './resources/views/**/*.blade.php',
            './safelist.txt',
        ],
    },

There is no special syntax for the safelist.txt. You can have the class names on each line or simply separate them with a space.

[DmiPet]

Thank you both!

[noook]

How can we use Regexes to match patterns ?

[thedotmack]

Simple way to do this could be some kind of formatting in comments no? Just in between 2 indicators, grab all the classes. Throw that bish right in to the html.

<!-- Safelist: mb-0 mt-3 border-red-500 -->

Right now my quick and dirty solution to this is to just make a <div class="hidden mb-0 mt-3 border-red-500">

Maybe something like <div class="mb-1 mt-4 border-red-600 safe:mb-0 safe:mt-3 safe:border-red-500">