有没有一种方法可以将scss嵌套和tailwindcss结合起来？

Question

我是个新手，我想在我的新项目中同时使用时髦的css和顺风。但我在嵌套方面遇到了问题，特别是当我使用"@apply“时。

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

红色应用于所有li，但最后一个孩子(灰色)不起作用。我不确定这是否可能

Answer 1

现在我们不能合并SCSS和顺风文件。但我们可以这样做来实现这一点，为ul标记mylist指定一个类名

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

Answer 2

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

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 3

你可以同时使用Sass和Tailwind，尽管对于as detailed in the docs有一些需要注意的事情。

不过，正如文档中还提到的那样，it is recommended that you use PostCSS exclusively作为预处理器。你可以在PostCSS中使用嵌套、变量和更多的东西，在PostCSS中你不能做任何你能做的事情。

3年多前，我把我的构建过程从只使用Sass切换到了PostCSS，我没有发现任何遗漏。事实上，我可以做得更多，我从未回头看过。