49 replies

Am I refactoring unnecessarily?

We have some base styles created by .js config files through Tailwind (media query values, colors, etc) and then compiled automatically into css variables.

We have a .js file like this:

 theme: {
    // Breakpoints. https://v2.tailwindcss.com/docs/breakpoints
    screens: {
      // Translates to => @media (min-width: 320px) { ... }
      xs: { min: "320px" },
      // Translates to => @media (min-width: 640px) { ... }
      sm: { min: "640px" },
      // Translates to => @media (min-width: 768px) { ... }
      md: { min: "768px" },
      // Translates to => @media (min-width: 1024px) { ... }
      lg: { min: "1024px" },
      // Translates to => @media (min-width: 1280px) { ... }
      xl: { min: "1280px" },
      // Translates to => @media (min-width: 1536px) { ... }
      xxl: { min: "1536px" },
    },

 theme: {
    // Breakpoints. https://v2.tailwindcss.com/docs/breakpoints
    screens: {
      // Translates to => @media (min-width: 320px) { ... }
      xs: { min: "320px" },
      // Translates to => @media (min-width: 640px) { ... }
      sm: { min: "640px" },
      // Translates to => @media (min-width: 768px) { ... }
      md: { min: "768px" },
      // Translates to => @media (min-width: 1024px) { ... }
      lg: { min: "1024px" },
      // Translates to => @media (min-width: 1280px) { ... }
      xl: { min: "1280px" },
      // Translates to => @media (min-width: 1536px) { ... }
      xxl: { min: "1536px" },
    },

And then we use it in our breakpoints like this:

@media (min-width: theme("screens.lg")) {}

@media (min-width: theme("screens.lg")) {}

There wasn't documentation on this from what I know and only learned how this actually works through asking one of the leads. I tried

ctrl + shift + f

ctrl + shift + f

and couldn't find where something like

"screens.lg"

"screens.lg"

was being declared (because it's being initialized inside an object so it's hard to search for).

I ended up just redefining these separately as Sass vars:

// These are from `tailwindVars.scss`
// The tailwind values are generated from `/tailwind/customer-base.js`
// Using this file mostly for documentation and ease-of-use
// over using something like `theme("screens.lg")` we can
// just use `$mq-lg` instead
$mq-sm: 640px;
$mq-md: 768px;

$mq-phone: $mq-sm;
...

// These are from `tailwindVars.scss`
// The tailwind values are generated from `/tailwind/customer-base.js`
// Using this file mostly for documentation and ease-of-use
// over using something like `theme("screens.lg")` we can
// just use `$mq-lg` instead
$mq-sm: 640px;
$mq-md: 768px;

$mq-phone: $mq-sm;
...

KP-C

Kevin Powell - Community•10mo ago•

49 replies

vince

Am I refactoring unnecessarily?

We have some base styles created by .js config files through Tailwind (media query values, colors, etc) and then compiled automatically into css variables.

We have a .js file like this:

 theme: {
    // Breakpoints. https://v2.tailwindcss.com/docs/breakpoints
    screens: {
      // Translates to => @media (min-width: 320px) { ... }
      xs: { min: "320px" },
      // Translates to => @media (min-width: 640px) { ... }
      sm: { min: "640px" },
      // Translates to => @media (min-width: 768px) { ... }
      md: { min: "768px" },
      // Translates to => @media (min-width: 1024px) { ... }
      lg: { min: "1024px" },
      // Translates to => @media (min-width: 1280px) { ... }
      xl: { min: "1280px" },
      // Translates to => @media (min-width: 1536px) { ... }
      xxl: { min: "1536px" },
    },

 theme: {
    // Breakpoints. https://v2.tailwindcss.com/docs/breakpoints
    screens: {
      // Translates to => @media (min-width: 320px) { ... }
      xs: { min: "320px" },
      // Translates to => @media (min-width: 640px) { ... }
      sm: { min: "640px" },
      // Translates to => @media (min-width: 768px) { ... }
      md: { min: "768px" },
      // Translates to => @media (min-width: 1024px) { ... }
      lg: { min: "1024px" },
      // Translates to => @media (min-width: 1280px) { ... }
      xl: { min: "1280px" },
      // Translates to => @media (min-width: 1536px) { ... }
      xxl: { min: "1536px" },
    },

And then we use it in our breakpoints like this:

@media (min-width: theme("screens.lg")) {}

@media (min-width: theme("screens.lg")) {}

There wasn't documentation on this from what I know and only learned how this actually works through asking one of the leads. I tried

ctrl + shift + f

ctrl + shift + f

and couldn't find where something like

"screens.lg"

"screens.lg"

was being declared (because it's being initialized inside an object so it's hard to search for).

I ended up just redefining these separately as Sass vars:

// These are from `tailwindVars.scss`
// The tailwind values are generated from `/tailwind/customer-base.js`
// Using this file mostly for documentation and ease-of-use
// over using something like `theme("screens.lg")` we can
// just use `$mq-lg` instead
$mq-sm: 640px;
$mq-md: 768px;

$mq-phone: $mq-sm;
...

// These are from `tailwindVars.scss`
// The tailwind values are generated from `/tailwind/customer-base.js`
// Using this file mostly for documentation and ease-of-use
// over using something like `theme("screens.lg")` we can
// just use `$mq-lg` instead
$mq-sm: 640px;
$mq-md: 768px;

$mq-phone: $mq-sm;
...

Am I refactoring unnecessarily?

Similar Threads

Am I refactoring unnecessarily?

Similar Threads

Similar Threads

Similar Threads