为什么在tailwindcss的自定义类中我不能定义2悬停：？

Question

在带有 tailwindcss 2 的 Laravel 8 应用程序中，我想在自定义类中设置 2 个悬停条件：

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

但我得到了错误：

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.

如果我只留下 1 个悬停： - 编译正常。 看起来这是有效的语法，但哪个有效？

修改： 因为那是我发现的项目中的laravel 8项目 1 个文件 /vendor/laravel-frontend-presets/tailwindcss/src/tailwindcss-stubs/tailwind.config.js 内容：

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

因为这个文件在 /vendor/ 目录下，我想我没有编辑它。

我还有包含内容的文件 webpack.mix.js：

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

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

不确定我要编辑哪个文件：

fontWeight: ['hover'],

?

修改 2：

我通过编辑 webpack.mix.js 在我的项目中添加了 tailwind.config.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')],
    });

并且在tailwind.config.js中我添加了变体：

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 无论如何在 resources/css/app.css 中添加 2 悬停：

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

我得到了语法错误：

(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;
      |                                                   ^

我在错误描述中看到@import 被提及。看来我错过了。我该如何使用它？

谢谢！

Answer 1

font-bold 类设置 font-weight CSS 属性。默认情况下 hover 变体未启用字体粗细实用程序类。您可以通过编辑您的顺风配置文件 (/vendor/laravel-frontend-presets/tailwindcss/src/tailwindcss-stubs/tailwind.config.js) 来启用它，如下所示：

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

参考：https://tailwindcss.com/docs/font-weight#variants

或者你可以使用:hover伪类来达到同样的效果：

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

Answer 2

对同一个对象使用 2 次悬停是没有意义的。您可以在一次悬停中将所有内容放在一起。 因为只能存在悬停。