SR-009: Created responsive typography plugin

src/pages/index.tsx

@@ -11,6 +11,14 @@ const Home: NextPage = () => {
       </Head>
       <>
         <Hero />
+        <div className="">
+          <p className="text-r-3xl">48px: h1</p>
+          <p className="text-r-2xl">40px: h2</p>
+          <p className="text-r-xl">32px: h3</p>
+          <p className="text-r-lg">24px: h4, header, polaroid, button</p>
+          <p className="text-r-base">20px: h5, body</p>
+          <p className="text-r-sm">16px: h6</p>
+        </div>
         {/* <Services /> */}
         {/* <Projects /> */}
         {/* <About /> */}
@@ -25,8 +33,8 @@ export default Home;
 const Hero = () => {
   return (
     <>
-      <h1 className="py-3 font-roadster text-5xl text-black">Sunrise</h1>
-      <p className="leading-relaxed text-black">
+      <h1 className="py-3 font-roadster text-black text-r-3xl">Sunrise</h1>
+      <p className="leading-relaxed text-black text-r-xl">
         Creating software that looks and works great is our specialty at
         Sunrise. Our team of experts combines artistry and technical know-how to
         craft solutions that will make your business{" "}

src/styles/globals.css

@@ -1,38 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Responsive typography */
-
-@layer utilities {
-  .text-r-6xl {
-    @apply text-6xl;
-  }
-  .text-r-5xl {
-    @apply text-5xl;
-  }
-  .text-r-4xl {
-    @apply text-4xl;
-  }
-  .text-r-3xl {
-    @apply text-3xl;
-  }
-  .text-r-2xl {
-    @apply text-2xl;
-  }
-  .text-r-xl {
-    @apply text-xl;
-  }
-  .text-r-lg {
-    @apply text-lg;
-  }
-  .text-r-base .text-r-md {
-    @apply text-base;
-  }
-  .text-r-sm {
-    @apply text-sm;
-  }
-  .text-r-xs {
-    @apply text-xs;
-  }
-}