Tailwind+ Nuxt：@apply 不适用于所有课程

Posted 2023-03-06

【中文标题】Tailwind+ Nuxt：@apply 不适用于所有课程

【英文标题】：Tailwind+ Nuxt: @apply doesn't work for all classes

【发布时间】：2021-04-04 20:41:24

【问题描述】：

我将 Nuxt 与 Tailwind 一起使用。我有以下 main.less 文件：

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

    &:focus 
        @apply ring;
    

我得到这个编译错误：@apply 不能与 .ring 一起使用，因为 .ring 要么找不到，要么它的实际定义包括一个伪选择器，如：hover、：active 等。如果你是确保.ring 存在，确保所有@import 语句都得到正确处理在 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: [],

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

【参考方案1】：

愚蠢的我，尝试直接从文档中使用 ring 类，但 Tailwind 1 中不存在此类。Nuxt 还没有为 Tailwind 2 做好准备