support custom breakpoints

Thanks for making this module! I’ve been hoping to use the newer releases of Tailwind with Emotion.

I’m trying to use my custom @screen breakpoints with the macro, but can only seem to get the default breakpoints to work.

I’m using the approach mentioned by @llaski on this thread, by calling the _utils.stringifyScreen function. I recognize that this may not be intended as a public function, but it does work for the default breakpoints. Is there a way to have it recognize my custom breakpoints defined under my Tailwind config?

[ben-rogerson]

If you’re using them in a styled block then it’s a little more complex. You’d need to import the config and grab the screen sizes and work with them manually. I understand this isn’t ideal so I’ll provide a similar function in the near future.

For now, something like this should work:

// tailwind.helpers.js
import _get from 'lodash/get';
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '~./../../tailwind.config.js';
const { theme } = resolveConfig(tailwindConfig);

const SCREEN = _get(theme, 'borderColor.screens');

export { SCREEN };

[ben-rogerson]

I’ve run into that issue before and think I fixed it with the advice on that issue.

Adding sourceType: 'unambiguous' to my Babel config fixed this by allowing me to import a module.exports.