Breakpoints aren't combining well with custom spacing

[johnhyde]

The problem:

When I change the height or width of an element based on a custom breakpoint and then a built in breakpoint, the built in breakpoint which should take effect at a certain point fails to take effect.
When the custom breakpoint has a max-width set, so that it gives control over to the higher breakpoint at the right time, it's skipped altogether.

Link to a minimal reproduction:

https://github.com/johnhyde/tailwindcss-breakpoint-bug

macOS Catalina 10.15.6 / Google Chrome Version 85.0.4183.102

[adamwathan]

Tailwind generates all breakpoint variants in the same order they are specified in your config file, so when using extend, all custom breakpoints get added to the end.

You'll want to not use extend I'm guessing, so you can have fine-grained control over the order of your breakpoints so they take effect in the order you want them to.

I'm not exactly how you want it to work because your custom breakpoint overlaps with Tailwind's md breakpoint, but guessing it's probably close to this:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    screens: {
      sm: defaultTheme.screens.sm,
      'custom': '708px',
      'custom-to-lg': {'min': '708x', 'max': '1023px'},
      md: defaultTheme.screens.md,
      lg: defaultTheme.screens.lg,
      xl: defaultTheme.screens.xl,
    },
  },
  variants: {},
  plugins: [],
}

Going to move this to discussions because there's no behavior here we're planning to change but happy to help out with any clarifying questions or anything.

[johnhyde]

Thank you for taking the time to put together an example config file. It solves my problem.
I still don't understand why custom-to-lg was being ignored, since it was supposedly added last, but I suppose that's neither here nor there. I only tried to use custom-to-lg as a workaround.
I think it's worth mentioning in the documentation that extend can be used to add more screen sizes above xl, add breakpoints for other media queries, or modify an existing breakpoint, but cannot be used to insert another step, e.g. between sm and md.