Support other values of fontSize

src/components/Canvas/Sections/FontSizes.vue

@@ -6,15 +6,13 @@
     >
       <p
         class="mb-2 leading-none text-gray-900 dark:text-gray-500"
-        :style="{
-          fontSize: getFontSizeValue(value)
-        }"
+        :style="getFontSizeValue(value)"
       >
         {{ data.typographyExample }}
       </p>
       <CanvasBlockLabel
         :label="`text-${prop}`"
-        :value="getFontSizeValue(value)"
+        :value="getFontSizeString(value)"
       />
     </div>
   </div>
@@ -57,10 +55,18 @@ export default {
     getFontSizeValue (value) {
       // Tailwind 2.0 returns font size as array with size and line height
       if (Array.isArray(value)) {
-        return value[0]
+        return {
+          fontSize: value[0],
+          ...value[1]
+        }
       }
 
-      return value
+      return {
+        fontSize: value
+      }
+    },
+    getFontSizeString (value) {
+      return Object.values(this.getFontSizeValue(value)).join(', ')
     }
   }
 }

src/utils/index.js

@@ -12,5 +12,7 @@ export const remToPx = (rem, config) => {
 export const appendPxToRems = (rem, config) => {
   if (rem.search('rem') === -1) return rem
 
-  return `${rem} (${remToPx(rem, config)}px)`
+  return rem.replaceAll(/(\d|\.)*rem/g, (value) => {
+    return `${value} (${remToPx(value, config)}px)`
+  })
 }