Twin.macro: support custom breakpoints

[bennettrogers]

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]

Hey Benett, thanks for giving the new package a trial.

If you've added your custom breakpoints to the config then you can use them with tailwind classes as normal:

js tw.div`grid grid-cols-1 desktop:grid-cols-4`

// tailwind.config.js
module.exports = {
    theme: {
        screens: {
            tablet: '640px',
            laptop: '1024px',
            desktop: '1280px'
        },
    }
}

[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 };

[bennettrogers]

Thanks for replying so quickly.

I'm trying to use the @screen directive so that I can have a block of responsive CSS that can use styles that aren't directly supported in Tailwind (e.g. grid template areas).

I just gave your above suggestion a try, but I'm running into a problem that I've seen before: the module.exports vs export default conflict referenced in this Tailwind issue.

I'll mess with it a bit more, but if I can't get this to work I may just fall back to using Tailwind separate SCSS files for cases where I need to use Tailwind directives.

Thanks again!

[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.

[ben-rogerson]

Take a look at the Theme component in the CRA + Emotion + Tailwind Twin Starter that exposes the tailwind config via the theme prop.