Support for advanced screens

[nathan3000]

Tailwind has support for advanced screens with min-width and max-width media queries. This plugin only seems to support min-width.

Advanced Screens - documentation

screens: {
  'sm': {'min': '576px', 'max': '767px'},
  'md': {'min': '768px', 'max': '991px'},
  'lg': {'min': '992px', 'max': '1199px'},
  'xl': {'min': '1200px'},
}

I had a look at fixing the issue but I can't see how it could work in development when the config isn't being loaded and therefore can't be inspected:

return isProd
  ? '@media (min-width: ' + config.screens[mod] + ')'
  : '`@media (min-width: ${' +
    configIdentifier.name +
    '.screens["' +
    mod +
    '"]})`'

[bradlc]

Hey @nathan3000

I have added support for this on the next branch. The way it works in dev is by importing a utility function. So you end up with something like this:

import _utils from 'tailwind.macro/utils'
import _config from './tailwind.config.js'

let styles = {
  [_util.stringifyScreen(_config, 'sm')]: {
    textTransform: 'uppercase'
  }
}

I will try to publish this under the next tag on npm this week. I'll let you know!

[llaski]

Leaving this here for anyone working with the beta for tailwind v1 since the config's are now merged and the example above won't work if your not duplicating the default screen values. Took me a while to figure out the syntax, but this is how ya do it (using styled components)

import styled from' styled-components'
import _utils from 'tailwind.macro/utils'

const StyledComponent = styled.div`
    ${_utils.stringifyScreen(_utils.resolveConfig(), 'lg')} {
        color: red
    };
`

[bradlc]

@llaski Hey. The code in my previous comment is an example of what the babel plugin outputs. You wouldn’t actually write code like that yourself. Assuming you’re using tailwind.macro@next you would write something like:

import tw from 'tailwind.macro'

const StyledComponent = tw.div`text-red-500`

[llaski]

@bradlc I should have specified my use case more clearly. I needed direct access to the screen size because from what I could tell there isn't a way to use the directives from tailwind in combination with styled components. For example I would love to be able to do something like this:

 const StyledComponent = tw.div`
     display: grid;
     grid-template-columns: 1fr; 

    tw`@screen lg` { 
         grid-template-columns: 4fr;
    }
`

So the above is my workaround to replicate the directive so I don't duplicate the source of truth for screen sizes.