3

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

魔兽争霸3菜单

Tailwind 的文档提供了一个按钮示例。它按预期工作。

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

但是，有一个问题（或者我不会在这里）。apply适用于顺风示例，但不适用于我的自定义 css。apply仅适用于顺风自己的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乱来

4

1 回答 1

2

@apply不是CSS。这是一个TailwindCSS 指令，它会改变你的 CSS。但这不可能使用 TailwindCSS 的 CDN 变体，如TailwindCSS 安装指南中所述（强调他们的）

在开始之前，请注意，使 Tailwind CSS 变得出色的许多功能在 CDN 构建中不可用。要充分利用 Tailwind 的功能，请通过 npm 安装 Tailwind。

@apply 只是被 CSS 忽略。如果您仔细检查浏览器中的 CSS，您会看到这些类.btn并.btn-blue没有任何效果。

于 2019-01-22T13:19:08.623 回答