Как определить пользовательскую утилиту с медиа-запросами в Tailwind?
Итак, я пытался найти способ сделать свои пользовательские утилиты, например padding-root-inline, отзывчивыми к размерам экранов. Пока что я знаю, что могу сделать что-то вроде этого:
@layer utilities {
.padding-root-inline { ... }
.padding-root-inline-sm { ... }
}
а затем используйте модификаторы экрана, подобные этому:
<section class = "padding-root-inline max-sm:padding-root-inline-sm"></section>
Но это по-прежнему кажется неудобным, поскольку мне приходится писать вариативный класс вместе с базовым классом в каждом из компонентов, в которых я его использую. Я хочу что-то вроде этого:
@layer utilities {
@media all and (max-width: theme('screens.xs')) {
.padding-root-inline {
padding-inline: calc(theme('padding.root-inline') - 2rem);
}
}
}
чтобы я мог просто сказать padding-root-inline, и оно реагировало бы само по себе, без необходимости говорить sm:padding-root-inline-sm.
Ответы 1
Вы можете напрямую определить медиа-запросы в своей пользовательской утилите:
@layer utilities {
.padding-root-inline {
padding-inline: calc(theme('padding.root-inline') - 2rem);
@media (min-width: theme('screens.sm')) {
padding-inline: ...
}
@media (min-width: theme('screens.md')) {
padding-inline: ...
}
//...and so on
}
}
Не вижу никакой проблемы в таком подходе, проверьте площадку . Класс добавляется к тексту с надписью «ЗДЕСЬ ПРИМЕР...».
Однако я вижу, что по какой-то причине это не работает с моей стороны. Но я разберусь с этим. Спасибо за ссылку :)
Я попробовал, но это не работает!