Laravel mix - class from variable isnt builded

Question

my class from variable is not working, im sure its mix problem.

<div class="rounded bg-gradient-to-r {{$replay->playerOneTeam()}}">
    Team: {{ $replay->playerOneTeam()}}
</div>

It seems like purgeCSS or something is removing class "from-red-400". When I set it manually and do npm run dev it works, but when it's used from variable, it's not loading. The class is in code when I inspect but the code runs like it doesn't exist.

Answer 1

Check your tailwind.config.js file and look for something like this:

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],
    // ...
}

In this example, JIT mode is enabled and purge is where you can specify files where to look for used Tailwind CSS classes. From here, you have three options:

1. [Not recommended] Disable JIT mode.
2. Follow the guidelines here to make sure the compiler sees your class name in those files you specified, i.e. to write purgeable HTML code in those files.
3. Divide purge into content and safelist so the compiler doesn't accidentally remove your classes specified there (which will be classes that do not appear explicitly in purgeable HTML code).

Using the example above, the third option would look something like this:

module.exports = {
    mode: 'jit',
    purge: {
        content: [
            './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
            './vendor/laravel/jetstream/**/*.blade.php',
            './storage/framework/views/*.php',
            './resources/views/**/*.blade.php',
            './resources/js/**/*.vue',
        ],
        safelist: [
            'from-red-400', // this is the class you wanted

            // ... some other classes you may need

            'bg-blue-500', // example class
            'text-center', // example class
            'hover:opacity-100', // example class
        ]
    },
    // ...
}

Answer 2

in 2023, if someone has the same problem, this was the solution that I found working:

Add this in tailwind.config.js

safelist: [
        'bg-blue-100',
        {
            pattern: /bg-(gray|red|orange|amber|yellow|green|lime|blue|sky|teal|indigo|violet|purple|pink)-(50|100|200|300|400)/,
        },
        {
            pattern: /text-(gray|red|orange|amber|yellow|green|lime|blue|sky|teal|indigo|violet|purple|pink)-(500|600|700|800)/,
        },
    ],