Add em spacing to TailwindCSS #tailwindcss

tailwind.config.js

// Adds new spacing classes using `em` instead of `rem`. For example:
//   .w-4~
//   .h-8~
//   .mx-12~
//   .pl-6~

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  //... general configuration
  theme: {
    //... theme configuration
    extend: {
      //... theme extend configuration
      spacing: {
        ...(function () {
          const emSpacing = {};
          Object.keys(defaultTheme.spacing).forEach((key) => {
            const size = defaultTheme.spacing[key];
            if (size.indexOf("rem") > -1) {
              emSpacing[`${key}\~`] = size.replace("rem", "em");
            }
          });
          return emSpacing;
        })(),
      },
    },
  },
};