有没有办法结合scss嵌套和tailwindcss？答案

【问题标题】：Is there a way to combine scss nesting and tailwindcss?有没有办法结合scss嵌套和tailwindcss？
【发布时间】：2019-11-09 01:49:40
【问题描述】：

我是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，但最后一个孩子（灰色）不起作用。不知道有没有可能

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

您可以同时使用 Sass 和 Tailwind，不过as detailed in the docs 有一些注意事项。

尽管如此，正如文档 it is recommended that you use PostCSS exclusively 作为您的预处理器中所指出的那样。您可以在 PostCSS 中使用嵌套、变量等等，在 Sass 中没有什么是 PostCSS 无法做到的。

我在 3 年多前将我的构建过程从使用 Sass 转换为仅使用 PostCSS，并且我没有发现任何缺失。事实上，我可以做得更多，我从未回头。

【讨论】：

【解决方案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;
    }
  }
}

【讨论】：

【解决方案4】：

当然可以！

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

如果是你的情况，你的代码中有一个小错误

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

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

【讨论】：