我如何在这里使用申请？答案

【问题标题】：How can I use apply here?我如何在这里使用申请？
【发布时间】：2019-06-15 23:03:13
【问题描述】：

我正在使用 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 乱来

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

@apply 不是 CSS。这是一个TailwindCSS directive 会改变你的CSS。但这不可能使用 TailwindCSS 的 CDN 变体，如TailwindCSS installation guide 中所述（强调他们的）

在开始之前，请注意，许多功能使使用 CDN 构建无法使用 Tailwind CSS great。 充分利用 Tailwind 的功能，通过 npm 安装 Tailwind。

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

【讨论】：