SassError：@extend 类失败：tailwind vue 无法将多个 tailwind 类合并为一个自定义类答案

【问题标题】：SassError: failed to @extend class: tailwind vue can't unite several tailwind classes into a single custom classSassError：@extend 类失败：tailwind vue 无法将多个 tailwind 类合并为一个自定义类
【发布时间】：2020-09-25 06:56:27
【问题描述】：

我有一个看起来像这样的vue 组件：

<template>
    <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
        <li class="flex-1 md:flex-none md:mr-3
                    sm:text-xs md:text-xs lg:text-xs xl:text-sm">
            <a class="inline-block py-2 px-4
                    text-white no-underline" href="#">Link1</a>
        </li>

        <li class="flex-1 md:flex-none md:mr-3
                    sm:text-xs md:text-xs lg:text-xs xl:text-sm">
            <a class="inline-block py-2 px-4
                    text-white no-underline" href="#">Link2</a>
        </li>

       ...

  </ul>
</template>

可以看出，所有导航栏链接都有相同的顺风类。我想将所有这些类合并为一个类navbar-item。我尝试将以下内容添加到.vue 文件中：

<style lang = "scss" scoped>
    @import "../assets/css/tailwind.css";
    @import "../assets/css/style.css";

    .navbar-item {
        @extend .flex-1, .md\:flex-none, .md\:mr-3,
            .sm\:text-xs, .md\:text-xs, .lg\:text-xs, .xl\:text-sm;
     }
</style>

但是我得到了

SassError: ".navbar-item" failed to @extend ".flex-1".

错误。

我不确定如何解决它。任何帮助表示赞赏。

【问题讨论】：

标签： css vue.js sass tailwind-css

【解决方案1】：

使用 @apply 将任何现有的实用程序类内联到您自己的自定义 CSS 中。检查docs

例如

/* Won't work: */
.btn {
  @apply block bg-red-500;
  @apply hover:bg-blue-500;
  @apply md:inline-block;
}

/* Do this instead: */
.btn {
  @apply block bg-red-500;
}
.btn:hover {
  @apply bg-blue-500;
}
@screen md {
  .btn {
    @apply inline-block;
  }
}

【讨论】：