Фон попутного ветра непрозрачность - PullRequest
Новая
       67

Фон попутного ветра непрозрачность

0 голосов
/ 30 апреля 2020

Я пытаюсь применить прозрачность фона к div, используя попутный ветер, я пытался сделать это в классах, не используя никаких пользовательских настроек в пределах tailwind.js

<div class="expanded fixed inset-0 bg-black bg-opacity-50 w-full h-full flex items-start justify-center pt-12 z-10">
    <input type="text" class="border-r border-gray">
</div>

Это просто отображает черный фон без изменения его непрозрачности, поэтому я попробовал его в пользовательском классе, в случае, когда постобработка должна сделать несколько магий c: 

.expanded 
    @apply bg-black bg-opacity-50

Однако я просто получаю следующую ошибку, делая это таким образом :

@apply нельзя использовать с .bg-opacity-50, поскольку .bg-opacity-50 либо не может быть найден

Запуск npm список отображает мой версия попутного ветра как 1.4.1, которая должна быть найдена для поддержки этой функции: 

+-- tailwindcss@1.4.1
| +-- @fullhuman/postcss-purgecss@2.1.2
| | +-- postcss@7.0.27 deduped
| | `-- purgecss@2.1.2
| |   +-- commander@5.1.0
| |   +-- glob@7.1.6 deduped
| |   +-- postcss@7.0.27 deduped
| |   `-- postcss-selector-parser@6.0.2 deduped

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Если вы хотите уменьшить непрозрачность фона, вы можете сделать следующее: 

<div className="bg-gray-200 hover:opacity-25"></div>

В попутном ветре нет опции bg-opacity-50. Я использую версию 1.3.5, я считаю, не слишком отличается от вашей версии. Вместо этого вы можете использовать следующие опции: 

opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}
0 голосов
/ 30 апреля 2020

Я на 99% уверен, что это проблема с версией Tailwind

Вот вывод на черном фоне, как вы упомянули в Tailwind@0.5.2
Вывод: https://jsfiddle.net/y9t76px1/
Используемая библиотека: https://unpkg.com/tailwindcss@0.5.2 / dist / tailwind.min. css

Вот 50% прозрачный серый sh фон (с тем же кодом) в Tailwind@1.4.1
Вывод: https://jsfiddle.net/edg1oa2t/
Используемая библиотека: https://unpkg.com/tailwindcss@1.4.0 / dist / tailwind.min. css

И вы получаете следующую ошибку потому что bg-opacity была введена только в версии 1.4.0

@apply нельзя использовать с .bg-opacity-50, поскольку .bg-opacity-50 либо не может быть найден

Что означает что вы используете устаревшую библиотеку. пожалуйста, удалите и переустановите библиотеку Tailwind css и попробуйте снова.

...