为什么在tailwindcss的自定义类中我无法定义2个hover:？

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'],
            }
        },


    }
}

无论如何，在 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字体粗细实用程序类不启用变体。您可以通过编辑 tailwind 配置文件 ( /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;
}