Conversion from px to rem

[federicocappellotto97]

I develop websites based on layouts made with XD, Figma ecc.. and every size is in pixel, so i need to convert them in rem everytime. For example if a text has font-size: 18px, i use text-[1.125rem] . It would be very cool and useful to have a function that made the conversion automatically, for example text-[rem(18px)] that create the rule font-size: 1.125rem

[RichDonnellan]

You can add this to the top of your tailwind.config.js file:

const BASE = 16; // your base size
const rem = (px, key = px) => ({ [key]: `${px / BASE}rem` });

You can then use as so:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        ...rem(20),
        ...rem(24),
      }
    }
  }
}

You can then use text-20 or whichever values you choose to extend or overwrite. Hopefully, one day there will be an option to convert to pixels but generate rem under the hood.

I'm trying to track down where first saw this technique. I'll update once I locate.

[arthurshlain]

Thanks! Some edit needed: semicolon is unexpected and font-18 class name must be text-18.

[RichDonnellan]

You're welcome! I updated it per your feedback.

[gabrielmlinassi]

How about custom ones like text-[21px]. Is it possible to automatically convert to rem too?