I dont know how to make hover work after using purgeCss in laravel mix

[nezaboravi]

Hi, I spent last 8 hours trying to make it work and i have tried everything i could find on web. So i need a help. :)

I am using Laravel mix latest version, tailwind latest and laravel-mix-purgecss in my laravel project.

Problem: When i run npm run dev/watch, everything works. When i hover over my element, it shows me my customised colors defined in tailwind.config.js. Works as expected.

However, when i run npm run prod, hover is not working for bg-color Please notice that hover does work for text-color.

I have items define in my config/categories.php like so:

return [
    'categories' => [
        [
            'id' => 1,
            'name' => 'Equipment',
            'textColor' => 'text-a4a-equipment-red',
            'bottomBorderColor' => 'border-a4a-equipment-red',
            'bgColor' => 'bg-a4a-equipment-red',

This is the code i am having in my blade template -please note comment with explanation:

<a href="/list/{{ $category['id'] }}" class="
            flex
            {{$category['textColor']}}
            flex-col
            w-32 h-32
            mb-1
            border-1
            border-a4a-box-border
            hover:text-green-600 **// THIS WILL ALWAYS WORK, npm run dev or NPM run prod**
            hover:{{ $category['bottomBorderColor'] }} // value is 'border-a4a-equipment-red' defined in tailwind.config.js. THIS NEVER WORK ON npm run prod
            md:w-48
            md:h-48
            md:mb-2
            md:m-0
            items-center
            justify-center
            shadow-xl
            bg-white">
            <span class=""><img src="{!! $category['icon_big']  !!}" alt="{!! $category['name']  !!}"></span>
            <span class="text-xl font-bold">{!! $category['name']  !!}</span>
        </a>

Here is my webpack file:

require('laravel-mix-purgecss');
const tailwindcss = require('tailwindcss');

mix.sass('resources/sass/main.scss', 'public/css/main.css').options({
    processCssUrls: false,
    postCss: [tailwindcss('./tailwind.config.js')],
});

mix.js('resources/js/app.js', 'public/js').purgeCss({
    extractorPattern: /[\w-:/]+(?<!:)/g
});
mix.version();

Let me show you now my tailwind config:

module.exports = {
    theme: {
        extend: {
            margin: {
                above: '-mt-20',
                hover: '-mt-40'
            },
            borderWidth: {
                '1': '0.5px',
            },
            colors: {        
                'transparent-black': 'rgba(0,0,0,.2)',
                'a4a-box-border': '#D8D8D8',
                'a4a-equipment-red': '#AF0B28',
                'a4a-livestock-orange': '#F15A2C',
                'a4a-auctions-yellow': '#FDB82C',
                'a4a-vehicles-green': '#7DC242',
            },...

I have tried to screen record what i am referring to. https://www.dropbox.com/s/oml3zhkzs2esq4b/screen%20recording%202562-11-07%20at%2020.58.33.mov?dl=0

Thanks in advance for any suggestions.

[adamwathan]

The problem is you are using string concatenation to dynamically create a class name. Purgecss doesn't actually run your code so it doesn't know to keep that class. You should make sure to have the full class name in your source file and avoid interpolation.

Explained in the docs here:

https://tailwindcss.com/docs/controlling-file-size#writing-purgeable-html

[nezaboravi]

@adamwathan thanks for quick reply. I have read documentation.

I do have a full class name- please look here:

hover:{{ $category['bottomBorderColor'] }}

// value is category['bottomBorderColor'] => 'border-a4a-equipment-red',

You see? What am i missing?

[adamwathan]

The full class name hover:border-a4a-equipment-red never appears in your source code so Purgecss doesn't know to keep it.

[adamwathan]

I think for your situation I would add a hoverBottomBorderColor key in your categories file:

return [
    'categories' => [
        [
            'id' => 1,
            'name' => 'Equipment',
            'textColor' => 'text-a4a-equipment-red',
            'bottomBorderColor' => 'border-a4a-equipment-red',
            'hoverBottomBorderColor' => 'hover:border-a4a-equipment-red',
            'bgColor' => 'bg-a4a-equipment-red',

Then update your HTML to reference that when needed:

<a href="/list/{{ $category['id'] }}" class="
            flex
            {{$category['textColor']}}
            flex-col
            w-32 h-32
            mb-1
            border-1
            border-a4a-box-border
            hover:text-green-600 **// THIS WILL ALWAYS WORK, npm run dev or NPM run prod**
            {{ $category['hoverBottomBorderColor'] }} // value is 'border-a4a-equipment-red' defined in tailwind.config.js. THIS NEVER WORK ON npm run prod
            md:w-48
            md:h-48
            md:mb-2
            md:m-0
            items-center
            justify-center
            shadow-xl
            bg-white">
            <span class=""><img src="{!! $category['icon_big']  !!}" alt="{!! $category['name']  !!}"></span>
            <span class="text-xl font-bold">{!! $category['name']  !!}</span>
        </a>

Also make sure Purgecss is scanning your config/categories.php file:

mix.js('resources/js/app.js', 'public/js').purgeCss({
    folders: ['config', 'resources'],
    extractorPattern: /[\w-:/]+(?<!:)/g
});

[nezaboravi]

@adamwathan thank you very much. This solved it and now everything works. Thank you! I have learned from this.