Tailwind+ Nuxt：@apply 不适用于所有人类

Question

我正在使用带有 Tailwind 的 Nuxt。我有以下 main.less 文件：

.btn-default {
    @apply py-2 px-4 bg-white font-medium rounded-lg shadow-md;

    &:focus {
        @apply ring;
    }
}

我得到这个编译错误：@apply 不能与 .ring 一起使用，因为 .ring 要么找不到，要么它的实际定义包括一个伪选择器，如 :hover, :活动等。如果您确定 .ring 存在，请确保任何 @import 语句都得到正确处理 before Tailwind CSS 看到您的CSS，因为 @apply 只能用于同一 CSS 树中的类。

当我删除 ring 时，错误消失了。

在我的 nuxt.config.js 中，我像这样导入 less 文件：

css: [
    '@/assets/css/main.less',
],

这是我的tailwind.config.js

module.exports = {
    future: {
        // removeDeprecatedGapUtilities: true,
        // purgeLayersByDefault: true,
    },
    purge: [],
    theme: {
        extend: {
            colors: {
                primary: '#03B3B3',
                secondary: '#00DDA2',
                'dark-gray': '#323232',
            },
            screens: {
                sm: '576px',
                md: '768px',
                lg: '992px',
                xl: '1200px',
            },
            fontFamily: {
                sans: ["Rubik"],
                serif: ["Rubik"],
                mono: ["Rubik"],
                display: ["Rubik"],
                body: ['Rubik'],
            },
            borderRadius: {
                DEFAULT: '8px',
            },
            borderWidth: {
                '3': '3px',
            },
            container: {
                center: true,
                padding: {
                    DEFAULT: '15px',
                },
            },
        },
    },
    variants: {},
    plugins: [],
}

我做错了什么？为什么它与其他类一起使用？

Answer 1

愚蠢的我，试图直接从文档中使用环 class，但是这个 class 在 Tailwind 1 中不存在。Nuxt 还没有为 Tailwind 2 做好准备，但是

Tailwind+ Nuxt：@apply 不适用于所有人类

Tailwind+ Nuxt: @apply doesn't work for all classes

nuxt.js

tailwind-css

Tailwind+ Nuxt：@apply 不适用于所有人 类

Tailwind+ Nuxt: @apply doesn't work for all classes

nuxt.js

tailwind-css

Tailwind+ Nuxt：@apply 不适用于所有人类