[Proposal] Responsive ranges

[frankdejonge]

Currently when you have styles that only need to be applied between certain breakpoints you have to add a number of classes. I'm currently working on a product list which has icons to accompany the headers. Between small and medium the design works better when the icons are placed on top of the heading with a centered text. For the alignment I'm using flex, so now the classes needed are:

flex flex-col sm:flex-row md:flex-col

If there were ranges [from]-[to]:[item] this could look like:

flex flex-col sm-md:flex-row

Of course in the example it looks fairly insignificant, but these situations often call for multiple styles that need adjusting between certain breakpoints, flex being on of them. In my current situation it's a combinations of flex (for alignment), text-center (which needs a reset at md), w- and h- (for a bigger icon during stacked layout) and m- (for added spacing when stacked).

An added benefit it (should/could) remove the need for style resets after breakpoints.

What you you all think?

[adamwathan]

Hey Frank! So you can actually do this already by just adding new screens to your config:

module.exports = {
  // ...
  screens: {
    'sm': '576px',
    'sm-md': {'min': '576px', 'max': '767px'},
    'md': '768px',
    'md-lg': {'min': '768px', 'max': '991px'},
    'lg': '992px',
    'lg-xl': {'min': '992px', 'max': '1999px'},
    'xl': '1200px'
  }
}

Docs here: https://tailwindcss.com/docs/responsive-design#advanced-screens

[frankdejonge]

Silly me! That's amazing!