我如何在这里使用应用程序？

Question

我正在使用 tailwind css 来自定义我的菜单。我有一堆按钮，我想更改每个按钮内容的首字母以显示链接的快捷方式。这是暴雪在魔兽争霸3中使用的：

Tailwind 的文档提供了 button example。它按预期工作。

改变我信件的颜色。我可以使用 css 伪元素 first-letter.

但是，有一个问题（否则我不会在这里）。 apply 适用于顺风示例，但不适用于我的自定义 css。 apply 仅适用于 tailwind 自己的 css 吗？我错过了什么？

 .btn {
    @apply font-bold py-2 px-4 rounded; /* works as expected */
  }
  .btn-blue {
    @apply bg-blue text-white; /* works as expected */
  }
  .btn-blue:hover {
    @apply bg-blue-dark; /* works as expected */
  }
  
.btn::first-letter {
  font-size: 130%; /* works as expected */
  @apply bg-orange; /* nope */
}

div::first-letter {
  font-size: 130%; /* works as expected */
  @apply bg-orange; /* nope */
}

div {
  @apply bg-red; /* nope */
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>

<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>


<div>
sd
</div>

jsfiddle乱来

Answer 1

@apply 不是 CSS。这是一个TailwindCSS directive that will change your CSS. But this is not possible using the CDN variant of TailwindCSS as stated here in the TailwindCSS installation guide（强调他们的）

Before getting started please note, many of the features that make Tailwind CSS great are not available using the CDN builds. To take full advantage of Tailwind's features, install Tailwind via npm.

@apply 被 CSS 忽略了。如果您仔细检查浏览器中的 CSS，您会发现类 .btn 和 .btn-blue 没有任何效果。

我如何在这里使用应用程序？

How can I use apply here?

css

tailwind-css