support custom breakpoints about twin.macro HOT 5 CLOSED

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

from twin.macro.

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!

from twin.macro.

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.

from twin.macro.

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:

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

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

from twin.macro.

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

from twin.macro.