Updated default Tailwind styles

apps/comments-ui/public/main.css

@@ -561,7 +561,7 @@ video {
 }
 
 .mt-2 {
-  margin-top: 0.5rem;
+  margin-top: 0.8rem;
 }
 
 .w-full {
@@ -586,7 +586,19 @@ video {
 }
 
 .p-2 {
-  padding: 0.5rem;
+  padding: 0.8rem;
+}
+
+.text-xl {
+  font-size: 2rem;
+}
+
+.text-lg {
+  font-size: 1.8rem;
+}
+
+.text-md {
+  font-size: 1.5rem;
 }
 
 .text-white {
@@ -597,4 +609,12 @@ video {
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.5rem;
 }

apps/comments-ui/src/components/Form.js

@@ -76,7 +76,7 @@ class Form extends React.Component {
                 </div>
 
                 <textarea className="w-full rounded-md border p-2" value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
-                <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2">Comment</button>
+                <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2 text-md">Comment</button>
             </form>
         );
     }

apps/comments-ui/src/index.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    font-size: 1.5rem;
+}

apps/comments-ui/tailwind.config.js

@@ -1,9 +1,67 @@
 module.exports = {
+    theme: {
+        screens: {
+            sm: '640px',
+            md: '768px',
+            lg: '1024px',
+            xl: '1280px',
+            '2xl': '1400px'
+        },
+        spacing: {
+            px: '1px',
+            0: '0px',
+            0.5: '0.2rem',
+            1: '0.4rem',
+            1.5: '0.6rem',
+            2: '0.8rem',
+            2.5: '1rem',
+            3: '1.2rem',
+            3.5: '1.4rem',
+            4: '1.6rem',
+            5: '2rem',
+            6: '2.4rem',
+            7: '2.8rem',
+            8: '3.2rem',
+            9: '3.6rem',
+            10: '4rem',
+            11: '4.4rem',
+            12: '4.8rem',
+            14: '5.6rem',
+            16: '6.4rem',
+            20: '8rem',
+            24: '9.6rem',
+            28: '11.2rem',
+            32: '12.8rem',
+            36: '14.4rem',
+            40: '16rem',
+            44: '17.6rem',
+            48: '19.2rem',
+            52: '20.8rem',
+            56: '22.4rem',
+            60: '24rem',
+            64: '25.6rem',
+            72: '28.8rem',
+            80: '32rem',
+            96: '38.4rem'
+        },
+        fontSize: {
+            xs: '1.2rem',
+            sm: '1.4rem',
+            md: '1.5rem',
+            lg: '1.8rem',
+            xl: '2rem',
+            '2xl': '2.4rem',
+            '3xl': '3rem',
+            '4xl': '3.6rem',
+            '5xl': ['4.8rem', '1.15'],
+            '6xl': ['6rem', '1'],
+            '7xl': ['7.2rem', '1'],
+            '8xl': ['9.6rem', '1'],
+            '9xl': ['12.8rem', '1']
+        }
+    },
     content: [
         './src/**/*.{js,jsx,ts,tsx}'
     ],
-    theme: {
-        extend: {}
-    },
     plugins: []
 };