[Feature Proposal]: Generate @responsive sizes from custom config values / for specific sizes

[garygreen]

We would like to use @responsive but generate ONLY for specific screen sizes from a custom config value e.g:

screens: {
    'xs': '480px',
    'sm': '768px',
    'md': '992px',
    'lg': '1200px'
},

screensCustom: {
    'xs': { max: 480 - 1 + 'px' }
    'sm': { max: 768 - 1 + 'px' }
    'md': { max: 992 - 1 + 'px' }
    'lg': { max: 1200 - 1 + 'px' }
},

Suggested usage:

@responsive theme('screensCustom') {
   .input-lg {
      //...
   }
}

Or provide specific sizes:

@responsive theme('screensCustom.md'), theme('screensCustom.lg') {

Our use case is this - we don't want to add our max-width screen sizes to the standard screens config value because that will generate those extra breakpoints for EVERY SINGLE utility - we only want to target a specific class to add those extra breakpoints.

Honestly, I'm kinda suprised you can't easily do this in Tailwind. I'm sure we could do something with maybe a postcss plugin that can replicate what @responsive does under the hood, but it would just be nice to be able to feed @responsive with custom values as per your config.