Tailwind CSS custom breakpoints not working

Question

I registered a custom breakpoint ('mymd': '962px') and after that all breakpoints that are lower in width do not work

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'mymd': '962px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

html

<div class="sm:bg-red-900 
            md:bg-yellow-900 
            mymd:bg-gray-900 
            lg:bg-green-900 
            xl:bg-blue-900 
            2xl:bg-indigo-900 
            h-screen w-full">

2xl, xl, lg and mymd work correctly, but md & sm doesn't work

img - https://ibb.co/D4x3vF8

I'm leaving this comment only for newcomers - this question is related to TailwindCSS v3; if you're using v4, these are more relevant: How to use new container in Tailwind v4? and Porting complex custom breakpoint from tailwind.config.js to tailwind.css and Next.js + Tailwind CSS: Conflict between breakpoints and custom CSS classes — rozsazoltan
– rozsazoltan, Commented May 24 at 9:22

Alex · Accepted Answer · 2021-05-17 15:04:57Z

7

I cannot create a new breakpoint between the default breakpoint, but I did this

theme

const defaultTheme = require('tailwindcss/defaulttheme');

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'xs': '425px',
      ...defaultTheme.screens,
    },
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

HTML

<div class="sm:bg-red-900
            lg:bg-green-900
            3xl:bg-indigo-900
            h-screen w-full">
</div>

answered May 17, 2021 at 15:04

Alex

1511 gold badge1 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

painotpi · Accepted Answer · 2021-05-17 15:09:17Z

5

Try extending,

theme: {
 screens: {
   'sm': '640px',
   'md': '768px',
   'lg': '1024px',
   'xl': '1280px',
   '2xl': '1536px',
  },
  extend: {
    screens: {
      'mymd': '962px'
    }
  },
},

Update:

Seems to be working fine - check this sandbox You can view the result here

edited May 17, 2021 at 15:09

answered May 17, 2021 at 14:11

painotpi

7,0122 gold badges40 silver badges72 bronze badges

2 Comments

painotpi Over a year ago

@Alex updated my answer, overrides for default classes should go under screen, new classes should go under extend.screens

Alex Over a year ago

Same problem =(

Uddalak Seal · Accepted Answer · 2024-08-05 21:17:16Z

0

Extending and writing the screens in ascending order solved it for me

theme: {
container: {
  center: true,
  padding: "2rem",
  screens: {
    "2xl": "1400px",
  },
},
extend: {
  screens: {
    "xs" : "376px",
  },

edited Aug 5, 2024 at 21:17

answered Aug 5, 2024 at 21:15

Uddalak Seal

11 bronze badge

Comments

Legends · Accepted Answer · 2025-05-20 12:55:20Z

0

you can also set break-points directly in css:

//app.css
@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;  // <= custom break-points
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  <!-- ... -->
</div>

answered May 20 at 12:55

Legends

22.9k17 gold badges102 silver badges133 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS custom breakpoints not working

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related