Блог

Главная - Вопросы по программированию - Расширенные варианты не работают в Tailwind 2.0.2 и Laravel 8

Расширенные варианты не работают в Tailwind 2.0.2 и Laravel 8

#css #laravel #tailwind-css #extend #variant

#css #laravel #tailwind-css #расширить #вариант

Вопрос:

Я использую Tailwind CSS версии 2.0.2 в проекте Laravel 8.44.0. Я просто пытаюсь добавить некоторые стили к своим активным вкладкам меню.

Вот мои варианты в tailwind.config.js:

     variants: {
        extend: {
            opacity: ['disabled'],
            backgroundColor: ['active'],
            borderColor: ['active'],
        },
    },

затем на моей странице у меня есть ссылки, которые я хочу стилизовать, когда они активны, например:

 <a href="#packages" class="navigation__link border-b-2 bg-white border-gray-200 active:border-red-500 active:bg-red-200 active">
                        Packages
                    </a>

Но стиль не применяется, когда ссылка активна. Фон ссылки остается белым, а нижняя граница остается серой.

Есть ли что-нибудь, что я должен был сделать для создания вновь добавленных вариантов?

Спасибо!

Ответ №1:

Ваш код работает отлично:

 <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      variants: {
        extend: {
          opacity: ['disabled'],
          backgroundColor: ['active'],
          borderColor: ['active']
        }
      }
    }
  </script>
</head>

<body>
  <a href="#packages" class="navigation__link border-b-2 bg-white border-gray-200 active:border-red-500 active:bg-red-200 active">
    Packages
  </a>
</body>

</html>

Однако я полагаю, что вы неправильно :active понимаете псевдокласс.

:active присутствует, когда вы удерживаете нажатой кнопку мыши на ссылке. Он отключится в тот момент, когда вы отпустите. Добавление класса css active в вашу ссылку не приведет к :active активации состояния. См. https://developer.mozilla.org/en-US/docs/Web/CSS/:active для получения дополнительной информации о том, как это работает.

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

 <a href="#packages" class="navigation__link border-b-2 bg-white border-gray-200">
  Packages
</a>
<a href="#containers" class="navigation__link border-b-2 bg-white border-red-500 bg-red-200 active">
  Containers
</a>
<a href="#envelopes" class="navigation__link border-b-2 bg-white border-gray-200">
  Envelopes
</a>

Комментарии:

1. Вы правы. Я совершенно забыл, что задал здесь вопрос… но да, я хотел иметь возможность стилизовать некоторые ссылки (вкладки меню), когда соответствующий раздел был показан на странице. Что я мог бы легко сделать в CSS (применив стиль к .navigation__link.active). Ничего общего с состоянием :active, поэтому мне даже не нужно было расширять варианты вообще. Спасибо за ваше время.

Метки: ,