CODEWITHSUNDEEP
csstailwind-css
Alex
Alex

Reputation: 151

Tailwind CSS custom breakpoints not working

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

Upvotes: 8

Views: 10162

Answers (3)

Uddalak Seal
Uddalak Seal

Reputation: 1

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",
  },

Upvotes: 0

painotpi
painotpi

Reputation: 6996

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

Upvotes: 5

Alex
Alex

Reputation: 151

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>

Upvotes: 7

Related Questions