代码之家 › 专栏 › 技术社区 › aloisdg

我怎样才能在这里使用Apply?

tailwind-css css

aloisdg · 技术社区 · 6 年前

我正在使用Tailwind CSS自定义菜单。我有很多按钮,我想更改每个按钮内容的第一个字母以显示链接的快捷方式。这是暴雪在魔兽争霸3中使用的:

warcraft3 menu

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

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

但是,有一个问题(或者我不会在这里)。 apply 适用于Tailwind示例,但不适用于我的自定义CSS。做 应用 只适用于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>