How should I deal with responsive breakpoints as components in Tailwind?
Without Tailwind, I used to declare breakpoints as a scss mixins:
@mixin tablet-portrait {
@media (min-width: 700px) {
@content;
}
}
Then:
@include tablet-portrait {
// whatever
}
I know that Tailwind has responsive utility clases to use it inline as md:color-red
but I need to abstract this breakpoins as components, as in above example.
How should I extract Tailwind breakpoints from Tailwind config file?
I found the @screen directive, that solves this question:
https://tailwindcss.com/docs/functions-and-directives/#screen
as easy as
@screen md {
// whatever
}
Update. As mentioned in the comment, Taliwind 3.2.7 has different notation:
@media screen(sm) {
/* ... */
}