REM PX units configuration

[peterpalkovic]

Hey @barvian,

What is the best approach to configure your plugin to use both 'rem' and 'px' units?

Use case: rems for typography and px for spacing.

Thanks.

[barvian]

Hey @peterpalkovic, unfortunately I think you'd need two sets of breakpoints at the moment, one in rems and the other in px, i.e.:

// tailwind.config.ts
screens: {
  sm: '30rem',
  'sm-px': '480px',
  md: '40rem',
  'md-px': '640px',
  // ...
},
fluid: {
  // You'd also have to specify the default screens yourself, because the plugin
  // could no longer sort your breakpoints as they have different units (same with Tailwind itself, see below)
  defaultScreens: ['30rem', '60rem']
}

Then you could apply the px ones to spacing-related utilities i.e. ~sm-px/~lg-px:~px-4/8. Admittedly that's kind of ugly and repetitive, though. It could also interfere with Tailwind's arbitrary screen variants (i.e. min-[320px]), because I think those require all breakpoints to have the same unit. Curious to hear your thoughts.