dr.Brain

doctor Brain

мир глазами веб-разработчика

Tailwind: пользовательские условия

создаем пользовательские условия для применения стилей в Tailwind CSS

dr.Brain

время чтения 1 мин.

Photo by Yasamine June on Unsplash

Хорошо реализованная возможность кастомизации является одной из лучших особенностей Tailwind CSS. Вся магия происходит в файле tailwind.config.js. Давайте рассмотрим как создавать пользовательские условия для применения стилей.

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

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-focus'],
    }
  }
}

Это решение позволяет использовать такие классы, как group-focus:bg-blue-500.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.