Question

如何为 tailwind 编写高级选择器（我在 Laravel 中使用它）。我有例如这个：

val expiredSum = list.filter { it.status == "EXPIRED" }.sumByDouble { it.amount.toDouble() }
val initialValue = list.firstOrNull { it.status == "WAIT" }?.amount ?: 0F
val result = initialValue + expiredSum

但混合总是失败，错误：找不到父级。 如果我使用以下格式，它可以工作，但我失去了 Sass 高级选择器的优点：

.nav-link {
    @apply px-3 py-2 rounded-md text-sm font-medium
    &-active {
        @apply bg-gray-900 text-white
    }
    &-inactive {
        @apply text-gray-300 hover:bg-gray-700 hover:text-white
    }
}

有什么想法吗？

Answer 1

您是否在 app.css 文件中的 @layer 中编写了 css？从他们的网站，你应该有这样的东西：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .nav-link-active {
    @apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium;
  }
  .nav-link-inactive {
    @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
  }
}

Answer 2

我遇到了同样的问题 - 你不能嵌套 css 和使用@apply。

根据文档，您可能使用 Sass 的大部分内容都可能与 PostCSS 一起使用。我使用了 postcss-nested 插件来让嵌套和应用协同工作。

https://tailwindcss.com/docs/using-with-preprocessors#nesting

Tailwindcss 2.0 with SASS - 使用高级选择器

2 个答案: