TailwindCSS bg-opacity не работает в React

Question

Я пытаюсь установить прозрачность фона в разделе «Вход», но когда я добавляю это в свой className, цвет фона просто исчезает. И если я использую opacity-75, весь дочерний div будет прозрачным, как и должно, если я использую opacity-100, цвет фона просто исчезнет, ​​и будет видно только поле ввода, это вроде как подключено. Кроме того, я использую по умолчанию tailwind.config файл с попутным ветром v2.0.2.

Вот мой код:

      ...
        <div className={"h-screen w-screen py-10 lg:w-3/6"}>
            <div
                className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
                <Logo/>
                <Text/>
...

Я также пробовал встроенный css, но все еще не работал. с помощью <tcode id="74680"></tcode>(за входами должна быть белая прозрачная область)

Answer 1

Просто обновление для всех, кто сюда заходит: начиная с Tailwind CSS версии 3, в новой версии обновили способ работы классов непрозрачности. Старый синтаксис теперь заменен новым, и значение применяется непосредственно к самому классу цвета.

Новый синтаксис добавляет к цвету значение непрозрачности, разделенное косой чертой / . Например,bg-gray-800сbg-opacity-75будет выглядеть так в версии Tailwind CSS 3 и выше:

      className={"bg-gray-50/75 h-full max-w-md rounded-2xl shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>

Answer 2

Opacty

Используйте только ключевое слово непрозрачности, для версии 2.2.7 Tails wind

пример:

      <div
className = "opacity-75 bg-red-300">
</div>

Answer 3

Я думаю, вы ищете что-то вроде этого:

      <div class="bg-green-400 h-32">
  <div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
    <div>Your Opacity child div here</div>  
  </div>
</div>