Tailwindcss: Feature request: xs breakpoint

[munzirstudio]

Hi

Would you consider adding XS: @media (max-width: 575.98px) to the breakpoints.

Thanks!

[benface]

575.98px lol

[sambeevors]

[rnarius]

Hi @munzirstudio

you can customize the default breakpoints in your tailwind.js config file. You can also add new ones. This could look like this:

  screens: {
    'xs': '380px',
    'sm': '540px',
    'md': '720px',
    'lg': '920px',
    'xl': '1040px'
  },

you can find more infos about that in the docs: https://tailwindcss.com/docs/responsive-design/

If you want to define a maximum width for your screen, you would do it like this:

'to-xs': [{'max': '575px'}],

[munzirstudio]

Thanks @rnarius

[adamwathan]

I think we're going to stick with the current default breakpoints for now, but you're absolutely free and encouraged to customize them in your config file to meet your needs 👍

[sharik709]

For some reason, My config file changes are not getting compiled. I have checked my mix js file and it is targeting right file and restarted watch but still it doesn't recognize xs. Any idea on how can I get it to compile.

[SHxKM]

@sharik709 did you manage to get this to work?

[code23-isaac]

@sharik709 super late reply but for benefit of others, in tailwind.config.js the 'extend' array needs to be within the 'theme' array to work - this fixed it for me.

[wahyusa]

Hi! i've just add custom breakpoint for 425px

module.exports = {
  theme: {
    screens: {
      'mm': '425px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    },
  },
}

then create something like

<h1 class="text-base mm:text-xl sm:text-2xl lg:text-3xl"> Uvuvwevwevwe </h1>

but didn't work...

is this correct ?
is there any other configuration ?

[JohnPevien]

Hi! i've just add custom breakpoint for 425px

module.exports = {
  theme: {
    screens: {
      'mm': '425px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    },
  },
}

then create something like

<h1 class="text-base mm:text-xl sm:text-2xl lg:text-3xl"> Uvuvwevwevwe </h1>

but didn't work...

is this correct ?
is there any other configuration ?

You can do it like this, this worked for me.

xl: { max: '1279px' },
lg: { max: '1023px' },
md: { max: '767px' },
sm: { max: '639px' },
xs: { max: '425px' }

As instructed here