fix: style issue

Author: geekdada

src/pages/Content/styles/components/App.scss

@@ -2,14 +2,14 @@
   position: absolute;
   width: 450px;
   height: 600px;
-  z-index: 9998;
+  z-index: 99998;
   @apply bg-white shadow rounded-lg overflow-hidden flex flex-col;
 
   &--inactive {
     display: none;
   }
   &__header {
-    @apply bg-purple-800 px-5 py-3 text-white font-bold cursor-move flex justify-between items-center;
+    @apply bg-purple-800 px-5 py-3 text-white font-bold text-lg cursor-move flex justify-between items-center;
   }
   &__close-button {
     @apply p-1

src/pages/Content/styles/components/TranslationItem.scss

@@ -12,10 +12,10 @@
     }
   }
   &__original {
-    @apply bg-gray-50 hover:bg-gray-100 p-3 rounded cursor-pointer;
+    @apply bg-gray-50 hover:bg-gray-100 p-3 rounded cursor-pointer leading-normal;
 
     .ReactCollapse--collapse {
-      min-height: 36px;
+      min-height: 48px;
       will-change: height;
       transition-property: height;
 
@@ -26,7 +26,7 @@
     }
   }
   &__result {
-    @apply rounded bg-yellow-50 p-3 space-y-2;
+    @apply rounded bg-yellow-50 p-3 space-y-2 leading-normal;
   }
   &__source-lang-tag {
     @apply px-2 py-1 bg-green-50 text-green-600 text-sm rounded;

src/pages/Content/styles/index.scss

@@ -1,6 +1,3 @@
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
 @import "./components/Icon";
 @import './components/App';
 @import './components/TranslationList';
@@ -15,6 +12,10 @@
     left: 0;
     margin: 0;
     padding: 0;
+    font-size: 16px;
+    z-index: 99997;
+
+    @apply font-sans leading-normal;
 }
 
 #ate-container {
@@ -31,7 +32,7 @@
 
 #ate-icon {
     display: none;
-    z-index: 9999;
+    z-index: 99999;
     position: absolute;
     top: 0;
     left: 0;

tailwind.config.js

@@ -5,6 +5,69 @@ module.exports = {
   },
   darkMode: false, // or 'media' or 'class'
   theme: {
+    fontSize: {
+      xs: [remToPX(0.75), { lineHeight: remToPX(1) }],
+      sm: [remToPX(0.875), { lineHeight: remToPX(1.25) }],
+      base: [remToPX(1), { lineHeight: remToPX(1.5) }],
+      lg: [remToPX(1.125), { lineHeight: remToPX(1.75) }],
+      xl: [remToPX(1.25), { lineHeight: remToPX(1.75) }],
+      '2xl': [remToPX(1.5), { lineHeight: remToPX(2) }],
+      '3xl': [remToPX(1.875), { lineHeight: remToPX(2.25) }],
+      '4xl': [remToPX(2.25), { lineHeight: remToPX(2.5) }],
+      '5xl': [remToPX(3), { lineHeight: '1' }],
+      '6xl': [remToPX(3.75), { lineHeight: '1' }],
+      '7xl': [remToPX(4.5), { lineHeight: '1' }],
+      '8xl': [remToPX(6), { lineHeight: '1' }],
+      '9xl': [remToPX(8), { lineHeight: '1' }],
+    },
+    spacing: {
+      px: '1px',
+      0: '0px',
+      0.5: remToPX(0.125),
+      1: remToPX(0.25),
+      1.5: remToPX(0.375),
+      2: remToPX(0.5),
+      2.5: remToPX(0.625),
+      3: remToPX(0.75),
+      3.5: remToPX(0.875),
+      4: remToPX(1),
+      5: remToPX(1.25),
+      6: remToPX(1.5),
+      7: remToPX(1.75),
+      8: remToPX(2),
+      9: remToPX(2.25),
+      10: remToPX(2.5),
+      11: remToPX(2.75),
+      12: remToPX(3),
+      14: remToPX(3.5),
+      16: remToPX(4),
+      20: remToPX(5),
+      24: remToPX(6),
+      28: remToPX(7),
+      32: remToPX(8),
+      36: remToPX(9),
+      40: remToPX(10),
+      44: remToPX(11),
+      48: remToPX(12),
+      52: remToPX(13),
+      56: remToPX(14),
+      60: remToPX(15),
+      64: remToPX(16),
+      72: remToPX(18),
+      80: remToPX(20),
+      96: remToPX(24),
+    },
+    borderRadius: {
+      none: '0px',
+      sm: remToPX(0.125),
+      DEFAULT: remToPX(0.25),
+      md: remToPX(0.375),
+      lg: remToPX(0.5),
+      xl: remToPX(0.75),
+      '2xl': remToPX(1),
+      '3xl': remToPX(1.5),
+      full: '9999px',
+    },
     extend: {},
   },
   variants: {
@@ -14,3 +77,11 @@ module.exports = {
   },
   plugins: [require('@tailwindcss/forms')],
 }
+
+/**
+ * @param {number} num
+ * @returns {string}
+ */
+function remToPX(num) {
+  return num * 16 + 'px'
+}