tailwindcss with px2rem

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    // https://github.com/tailwindlabs/tailwindcss/issues/1232
    // using px2rem, 1rem = 100px for 1920 screen
    fontSize: {
      "xs": "0.12rem",
      "sm": "0.14rem",
      "base": "0.16rem",
      "lg": "0.18rem",
      "xl": "0.2rem",
      "2xl": "0.24rem",
      "3xl": "0.3rem",
      "4xl": "0.36rem",
      "5xl": "0.48rem",
      "6xl": "0.6rem",
      "7xl": "0.72rem"
    },
    spacing: {
      px: '1px',
      "0": "0",
      "0.5": "0.02rem",
      "1": "0.04rem",
      "1.5": "0.06rem",
      "2": "0.08rem",
      "2.5": "0.1rem",
      "3": "0.12rem",
      "3.5": "0.14rem",
      "4": "0.16rem",
      "5": "0.2rem",
      "6": "0.24rem",
      "7": "0.28rem",
      "8": "0.32rem",
      "9": "0.36rem",
      "10": "0.4rem",
      "11": "0.44rem",
      "12": "0.48rem",
      "14": "0.56rem",
      "16": "0.64rem",
      "20": "0.8rem",
      "24": "0.96rem",
      "28": "1.12rem",
      "32": "1.28rem",
      "36": "1.44rem",
      "40": "1.6rem",
      "44": "1.76rem",
      "48": "1.92rem",
      "52": "2.08rem",
      "56": "2.24rem",
      "60": "2.4rem",
      "64": "2.56rem",
      "72": "2.88rem",
      "80": "3.2rem",
      "96": "3.84rem"
    },
    extend: {
      lineHeight: {
        "3": "0.12rem",
        "4": "0.16rem",
        "5": "0.2rem",
        "6": "0.24rem",
        "7": "0.28rem",
        "8": "0.32rem",
        "9": "0.36rem",
        "10": "0.4rem"
      }
    },
  },
  variants: [/*'responsive',*/ 'hover', 'important'],
  /*
  variants: {
    extend: {}
  },
  */
  plugins: [require('@neojp/tailwindcss-important-variant')]
}