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

Хорошо реализованная возможность кастомизации является одной из лучших особенностей Tailwind CSS. Вся магия происходит в файле tailwind.config.js
. Давайте рассмотрим как создавать пользовательские условия для применения стилей.
Создадим условие при котором стили можно будет применять только в случае, когда родительский элемент имеет определенный класс:
module.exports = {
variants: {
extend: {
backgroundColor: ['active', 'group-focus'],
}
}
}
Это решение позволяет использовать такие классы, как group-focus:bg-blue-500
.
Спасибо за внимание.