DEV Community

Discussion on: Breakpoints reactivity with Tailwind and VueJS

View post
Collapse
 
tbredin profile image
T Bredin • • Edited

Great utility. I've extended this to reference my breakpoints from the tailwind config so that they can be managed all in one place. My breakpoints are stored (as em's) in the tailwind config like so:

module.exports = {
  theme: {
    screens: {
      sm: '30em',
      md: '48em',
      lg: '64em',
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

And my breakpoint utility imports and converts them to pixels so we can make use of them, just modify the const screens variable to use the imported values like so:

import tailwindConfig from '@/tailwind.config.js';

const getPxBreakpoint = (val) => {
  return parseFloat(val) * 16;
};

export const screens = {
  sm: getPxBreakpoint(tailwindConfig.theme.screens.sm),
  md: getPxBreakpoint(tailwindConfig.theme.screens.md),
  lg: getPxBreakpoint(tailwindConfig.theme.screens.lg),
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
flozero profile image
florent giraud •

glad it helps you :)