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

Posted 2023-03-07

【中文标题】为啥在tailwindcss的自定义类中我不能定义2悬停：？

【英文标题】：Why in custom class of tailwindcss I can not define 2 hover:?为什么在tailwindcss的自定义类中我不能定义2悬停：？

【发布时间】：2021-07-05 23:26:27

【问题描述】：

在带有 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 被提及。看来我错过了。我该如何使用它？

谢谢！

【参考方案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;

【讨论】：

请看已修改

你能告诉我你的项目使用的是哪个版本的tailwindcss吗？

在 package.json 我找到了 "tailwindcss": "^2.0.3"

好的，那你需要在/vendor/laravel-frontend-presets/tailwindcss/src/tailwindcss-stubs/tailwind.config.js中添加以上内容

@mstdmstd 替代方法可能对您有用

【参考方案2】：

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

【讨论】：

如何将所有内容放在一起悬停？哪种语法有效？