"rebuild" speed is extremely slow when using safelist

[thisIsLoading]

i need to set a lot of classes programmatically so i probably dont have any other options than using the safelist (or do i?).

so i set mine to:

safelist: [
    {
        pattern: /^(bg-|border-|text-|ring-)/,
        variants: ['hover', 'active', 'focus', 'dark'],
    },
],

i expected some kind of a slow down when rebuilding but right now i am waiting 34 minutes (and counting) for it to finish the rebuild.

i havent the newest machine but it is still decent:

CPU: 12-core AMD Ryzen 9 3900X (-MT MCP-) speed/min/max: 3124/2200/4672 MHz
Kernel: 6.9.2-1-MANJARO x86_64 Up: 13h 30m Mem: 30.38/62.74 GiB (48.4%)
Storage: 2.75 TiB (35.1% used) Procs: 647 Shell: Bash inxi: 3.3.34

is this expected? do i do it wrong?

thanks

[flavorjones]

Thanks for asking this question, and I'm sorry you're having a problem.

This gem packages up the tailwindcss binary for your platform, and the behavior you're describing is from that binary and not this gem, so I'm not sure I can help.

You may want to open an issue or discussion upstream in https://github.com/tailwindlabs/tailwindcss or in some other tailwind-specific user forum.

[thisIsLoading]

@flavorjones yeah, i figured it may be the wrong place, unfortunately only after i posted (sorry)

with that said, i just discovered that you have to be super specific when it comes to the safelist or it just is unusable. so, for anyone finding this via google, i had to set my safelist specifically to colors, like

    safelist: [
        {
            pattern:
                /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ['hover', 'active', 'focus', 'dark', 'dark:hover'],
        },
        {
            pattern:
                /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ['hover', 'active', 'focus', 'dark', 'dark:hover'],
        },
        {
            pattern:
                /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ['hover', 'active', 'focus', 'dark', 'dark:hover'],
        },
        {
            pattern:
                /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ['focus', 'dark', 'dark:focus'],
        },

    ],

which results in a 3 seconds compule time, which is manageable on my end.