Tailwind CSS - Responsive breakpoints as components

By tailwind You can use and Customizing the default breakpoints for your project.

1. Open your tailwind.config.js

2. Update/add screens inside your 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) { ... }
     }
   }
   

Source: https://tailwindcss.com/docs/breakpoints

I found the @screen directive, that solves this question:

https://tailwindcss.com/docs/functions-and-directives/#screen

as easy as

@screen md {
  // whatever
}