sass - 有没有办法结合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，但最后一个孩子（灰色）不起作用。我不确定这是否可能

score 2 · Accepted Answer

现在我们不能合并 SCSS 和 tailwind 文件。但是我们可以通过这样做来实现这一点，给ul标签一个类名mylist

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

score 1 · Accepted Answer

Selector you're trying to build here will be compiled to something like:

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

I think what you're trying to achieve here is this:

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

score 1 · Accepted Answer

您可以同时使用 Sass 和 Tailwind，尽管有一些注意事项，如文档中所详述。

不过，正如文档中所指出的，建议您专门使用 PostCSS作为预处理器。你可以在 PostCSS 中使用嵌套、变量等等，在 Sass 中没有什么是 PostCSS 无法做到的。

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

score 0 · Accepted Answer

他们当然可以！

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

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

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

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

4 回答 4