Why in custom class of tailwindcss I can not define 2 hover:?

user_10873713 0
Viewed 3695

In Laravel 8 app with tailwindcss 2 I want to set 2 conditions on hover in custom classes :

.btn_action_item {
    @apply py-1 px-3 block hover:bg-green-500 hover:font-bold text-gray-100;
}

But I got error :

The `hover:font-bold` class does not exist. If you're sure that `hover:font-bold` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

If I leave only 1 hover: - it is compiled ok. Looks like that is valid syntax, but which valid ?

MODIFIED : As that is laravel 8 project in the project I found only 1 file /vendor/laravel-frontend-presets/tailwindcss/src/tailwindcss-stubs/tailwind.config.js with content :

module.exports = {
  purge: [
    './resources/views/**/*.blade.php',
    './resources/css/**/*.css',
  ],
  theme: {
    extend: {
        fontFamily: { sans: ['Inter var'] },
    }
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

as this file is under /vendor/ directory I think I have no to edit it.

also I have file webpack.mix.js with content:

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

Not sure which file have I to edit with line :

fontWeight: ['hover'],

?

MODIFIED 2:

I added tailwind.config.js file in my project by editing webpack.mix.js :

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


const tailwindcss = require('tailwindcss');

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

and in tailwind.config.jsI added variants:

module.exports = {
    theme: {
        extend: {
            backgroundImage: theme => ({
                'test-device-sm': "url('/img/test-device/sm.png')",
                'test-device-md': "url('/img/test-device/md.png')",
                'test-device-lg': "url('/img/test-device/lg.png')",
                'test-device-xl': "url('/img/test-device/exlg.png')",
            })
        },

        variants: {
            extend: {
                fontWeight: ['hover'],
            }
        },


    }
}

bu Anyway adding 2 hover in resources/css/app.css :

.btn_action_item {
    @apply py-1 px-3 block hover:bg-green-500 hover:font-bold text-gray-100;
}

I got SyntaxError :

(234:51) /mnt/_work_sdb8/wwwroot/lar/tAdsBack/resources/css/app.css The `hover:font-bold` class does not exist. If you're sure that `hover:font-bold` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  232 |     .btn_action_item {
> 233 |         @apply py-1 px-3 block hover:bg-green-500 hover:font-bold text-gray-100;
      |                                                   ^

I see @import in error description is mentioned. Looks like I missed it. How have I to use it ?

Thanks!

tailwind-css
2 Answers

The font-bold class sets the font-weight CSS property. By default hover variant is not enabled for font-weight utility classes. You can enable it by editing your tailwind config file (/vendor/laravel-frontend-presets/tailwindcss/src/tailwindcss-stubs/tailwind.config.js) like so:

module.exports = {
  purge: [
    './resources/views/**/*.blade.php',
    './resources/css/**/*.css',
  ],
  theme: {
    extend: {
        fontFamily: { sans: ['Inter var'] },
    }
  },
  variants: {
    extend: {
     fontWeight: ['hover'],
    }
  },
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

Refer: https://tailwindcss.com/docs/font-weight#variants

Alternatively you can use :hover pseudo-class to achieve the same effect like so:

.btn_action_item {
    @apply py-1 px-3 block text-gray-100;
}
.btn_action_item:hover {
    @apply bg-green-500 font-bold;
}
user_99581760

Doesn't make sense to use 2 hover for the same object. You can put all together in one hover. Because only a hover can exist.

user_137043910
Related