我如何在这里申请?

时间:2019-01-22 13:01:52

标签: css tailwind-css

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

warcraft3 menu

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

更改我的字母的颜色。我可以使用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到处乱逛

1 个答案:

答案 0 :(得分:1)

@apply不是CSS。这是TailwindCSS directive,它将更改您的CSS。但这无法使用TailwindCSS installation guide(强调其内容)中所述的TailwindCSS的CDN变体

  

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

@apply仅被CSS忽略。如果您在浏览器中仔细检查CSS,您会发现.btn.btn-blue类完全无效。