Tailwind CSS — отзывчивые точки останова как компоненты
Что делать с чувствительными точками останова в качестве компонентов Tailwind?
Без Tailwind я раньше объявлял точки останова как миксины scss:
@mixin tablet-portrait {
@media (min-width: 700px) {
@content;
}
}
Потом:
@include tablet-portrait {
// whatever
}
Я знаю, что в Tailwind есть адаптивные вспомогательные классы, чтобы использовать их как встроенные в качестве md:color-red, но мне нужно абстрагировать эти точки останова как компоненты, как в приведенном выше примере.
Как извлечь точки останова Tailwind из конфигурационного файла Tailwind?
Ответы 4
Я нашел директиву @screen, которая решает этот вопрос:
https://tailwindcss.com/docs/functions-and-directives/#экран
так же легко, как
@screen md {
// whatever
}
По попутному ветру Вы можете использовать и настроить точки останова по умолчанию для вашего проекта.
Открой свой
tailwind.config.jsОбновите/добавьте
screensвнутри вашегоmodule.exports:theme: { screens: { 'sm': '640px', // => @media (min-width: 640px) { ... } 'md': '768px', // => @media (min-width: 768px) { ... } 'lg': '1024px', // => @media (min-width: 1024px) { ... } 'xl': '1280px', // => @media (min-width: 1280px) { ... } } }
Источник: https://tailwindcss.com/docs/breakpoints
@screen md не работает при использовании SCSS.
Между тем, если у вас есть точки останова (ключ screens), установленные в вашем tailwind.config.js, вы можете использовать это
.your-selector {
// your usual CSS
@media (min-width: theme('screens.xl.min')) {
// your media-queried CSS when > xl breakpoint
}
}
в tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
theme: {
screens: {
// adding xs to the rest
xs: "475px",
// if you did not add this, you would have only "xs"
...defaultTheme.screens,
},
},
};
Вместо того, чтобы использовать тему по умолчанию, вы можете использовать свойство «extend», чтобы разрешить расширение размеров экрана... v1.tailwindcss.com/docs/breakpoints#пользовательские медиа-запросыv2.tailwindcss.com/docs/…tailwindcss.com/docs/screens#adding-larger-breakpoints
Я обнаружил, что @screen md отлично работает в SCSS в моей настройке, но это решение интересно отметить, поскольку его можно использовать для
max-widthточек останова без изменения настройки точки останова по умолчанию:@media (max-width: theme("screens.md")) { ... }(обратите внимание, что это на 1 пиксель от идеального, но должно работать в 99,9% ситуаций).