36

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?

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
aitor
  • 2,281
  • 3
  • 22
  • 44

4 Answers4

94

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) {
  /* ... */
}
aitor
  • 2,281
  • 3
  • 22
  • 44
  • 1
    I'm using this in code today just fine but the current documentation has a new syntax: `@media screen(md) {...}`. It doesn't even mention the `@screen` directive. Not sure if this is a change they'll formalise at some point but if you're reading this answer and it doesn't work, that might be why. – Oli Feb 21 '23 at 22:42
  • 1
    Heads up: In my default laravel vite setup the first one (`@screen md`) works just fine. The other one does not work. – jakub_jo Apr 04 '23 at 22:44
8

@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
  }
}
kissu
  • 40,416
  • 14
  • 65
  • 133
  • 2
    I've found @screen md working fine in SCSS in my setup, but this solution is interesting of note as it can be used to have `max-width` breakpoints without changing the default breakpoint setup: `@media (max-width: theme("screens.md")) { ... }` (note that this is 1px off of perfect, but should work in 99.9% situations). – fredrivett Sep 08 '21 at 14:35
4

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,
    },
  },
  
};
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • 2
    Instead of pulling in the default theme you can use the "extend" property to allow for the extension of screen sizes... https://v1.tailwindcss.com/docs/breakpoints#custom-media-queries https://v2.tailwindcss.com/docs/breakpoints#extending-the-default-breakpoints https://tailwindcss.com/docs/screens#adding-larger-breakpoints – Justin Feb 21 '22 at 10:24
  • doesn't really answer the main question though – airtonix Feb 12 '23 at 10:11
3

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

fcdt
  • 2,371
  • 5
  • 14
  • 26
Par
  • 39
  • 3