How to use min and max width in Tailwind media query?

How can one use both min and max width in a media query using Tailwind Css 3?

My config:

module.exports = {
  content: ["index.html"],
  theme: {
    screens: {
      'sm': '768px',
      'md': '1024px',
      'lg': '1440px'
    },
  },
}

It's no problem doing for example:

@media screen(md) {}

But how can i incorporate a max-width in it as well?

I want the output css to look like:

@media screen and (min-width: some px) and (max-width: some px) {}

Thanks!

I just found the way to do it, I don't know why we don't have more information about theses on the official documentation but anyway

To target ONLY mobile:

@media (max-width: theme("screens.sm")) {
    // ...
}

In your case it will be:

@media (min-width: theme("screens.sm")) and (max-width: theme("screens.md")) {
    // ...
}

Will return:

@media (min-width: 640px) and (max-width: 768px) {
    // ...
}