有没有一种方法可以结合使用Scss嵌套和tailwindcss？

Question

我是tailwindcss的新手，我想在我的新项目中同时使用sassy css和tailwind。但是当我使用“ @apply”时，我在嵌套方面遇到了麻烦。

section {
  @apply .p-4;
  ul {
    li {
      @apply .ml-8 .text-red-600;
      li:last-child {
        @apply .text-gray-300;
      }
    }
  }
}

红色适用于所有li，但最后一个孩子（灰色）不起作用。我不确定是否有可能

Answer 1

现在，我们不能结合SCSS和tailwind文件。但是我们可以这样做，将类名命名为ul标签mylist

section {
  @apply .p-4;
}
.mylist li {
  @apply .ml-8 .text-red-600; 
}
.mylist li:last-child {
  @apply .text-gray-300;
}

Answer 2

您可以同时使用Sass和Tailwind ，尽管需要注意as detailed in the docs。

不过，正如文档it is recommended that you use PostCSS exclusively中所述，您也可以作为预处理器。您可以在PostCSS中使用嵌套，变量以及更多功能，实际上，与Sass相比，您无法使用PostCSS进行任何操作。

三年多以前，我将构建过程从仅使用Sass切换为PostCSS，但我没有发现任何遗漏。确实，我可以做得更多，而且我从没有回头。

Answer 3

您要在此处构建的选择器将被编译为类似的内容：

section ul li li:last-child {...}

我认为您要在这里实现的目标是：

section {
  @apply .p-4;
  ul {
    li {
      @apply .ml-8 .text-red-600;
    }
    li:last-child {
      @apply .text-gray-300;
    }
  }
}

Answer 4

当然可以！

它们没什么问题，有几个很小的缺点，但没什么特别的。

如果遇到这种情况，您的代码中会有一个小错误

section {
  @apply p-4;
  ul {
    li {
      @apply ml-8 text-red-600;

      &:last-child {
        @apply text-gray-300;
      }
    }
  }
}