Как я могу использовать здесь? - PullRequest
Новая
       6

Как я могу использовать здесь?

0 голосов
/ 22 января 2019

Я использую css попутного ветра, чтобы настроить свое меню. У меня есть несколько кнопок, и я хочу изменить первую букву содержимого каждой кнопки, чтобы показать связанный ярлык. Используется Blizzard в Warcraft3:

warcraft3 menu

В документах Tailwind приведен пример кнопки . Работает как положено.

Чтобы изменить цвет моего письма. Я могу использовать псевдоэлемент css first-letter .

Но есть проблема (или меня бы здесь не было). apply работает в примере с попутным ветром, но не с моим собственным css. Относится ли apply к нулю только с попутным ветром? Что я пропустил? 

 .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 голосов
/ 22 января 2019

@apply - это не CSS. Это директива TailwindCSS , которая изменит ваш CSS. Но это невозможно при использовании варианта CDN TailwindCSS, как указано здесь в Руководстве по установке TailwindCSS (выделено)

Прежде чем начать, обратите внимание, многие функции, которые делают Отличный CSS для попутного ветра недоступен при использовании сборок CDN. Для полного использования возможностей Tailwind установите Tailwind через npm.

@apply просто игнорируется CSS. Если вы внимательно изучите CSS в своих браузерах, вы увидите, что классы .btn и .btn-blue не имеют никакого эффекта.

...