Media queries with Goober

[joneslloyd]

I just wanted share a snippet for using media queries (with Goober, Tailwind and Twin) where the inbuilt Tailwind ones won't suffice (for example, setting a background image based on dynamic content which can't be handled as a background class in the Tailwind config file).

I just did this:

const BodyStyles = styled('div')(({ layout = false, imageUrl = false }) => [
    tw`flex flex-col bg-transparent divide-y divide-widget-white-line`,
    ('full' === layout && imageUrl) ? {
        [`@media (min-width: ${theme('screens.lg')})`]: {
            'background-repeat': 'no-repeat',
            'background-image': `radial-gradient(circle at 61% 153px, ${theme('colors.widget-purple.light-65')}, ${theme('colors.widget-purple.light')} 30%), url('${imageUrl}')`,
            'background-position': '183px -36px !important',
            'background-size': '100% 100% !important',
        },
    } : {},
]);

I could have put the background-repeat property as a Tailwind class on the section above (eg, lg:(bg-no-repeat)), and also moved the position + sizes into custom Tailwind classes (leaving only the background image here).

[joneslloyd]

.