♿ (js) Use px instead of rem to look good on any website

packages/js/tailwind.config.cjs

@@ -1,7 +1,45 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+function rem2px(input, fontSize = 16) {
+  if (input == null) {
+    return input
+  }
+  switch (typeof input) {
+    case 'object':
+      if (Array.isArray(input)) {
+        return input.map((val) => rem2px(val, fontSize))
+      }
+      // eslint-disable-next-line no-case-declarations
+      const ret = {}
+      for (const key in input) {
+        ret[key] = rem2px(input[key], fontSize)
+      }
+      return ret
+    case 'string':
+      return input.replace(
+        /(\d*\.?\d+)rem$/,
+        (_, val) => `${parseFloat(val) * fontSize}px`
+      )
+    case 'function':
+      return eval(
+        input
+          .toString()
+          .replace(
+            /(\d*\.?\d+)rem/g,
+            (_, val) => `${parseFloat(val) * fontSize}px`
+          )
+      )
+    default:
+      return input
+  }
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    ...rem2px(defaultTheme),
     extend: {
       keyframes: {
         'fade-in': {