Tailwind CSS - Responsive breakpoints as components

Question

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?

Answer 1

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

Answer 2

in 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,
    },
  },
  
};

Answer 3

@screen md is not working when using SCSS.
Meanwhile, if you have your breakpoints (screens key) set in your tailwind.config.js, you can use this

.your-selector {
  // your usual CSS
  @media (min-width: theme('screens.xl.min')) {
    // your media-queried CSS when > xl breakpoint
  }
}