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"),
    ]);

不确定我该用 line 编辑哪个文件：

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 次悬停没有意义。您可以将所有内容放在一起悬停。因为只有悬停才能存在。

为什么在tailwindcss的自定义类中我无法定义2个悬停：？

2 个答案: