Search code examples
cssmedia-queriesresponsivetailwind-cssscss-mixins

Tailwind CSS - Responsive breakpoints as components

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?

Solution

  • 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) {
  /* ... */
}