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>
+      <h1 className="py-3 font-roadster text-black text-r-3xl">Sunrise</h1>
-      <p className="leading-relaxed text-black">
+      <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;
-  }
-}

tailwind.config.ts

@@ -1,5 +1,11 @@
 import { type Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
+import plugin from "tailwindcss/plugin";
+
+interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+  [key: string]: V | RecursiveKeyValuePair<K, V>;
+}
+type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>;
 
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
@@ -9,6 +15,15 @@ export default {
         center: true,
         padding: "1.5rem",
       },
+      fontSize: {
+        xs: ["0.75rem", { lineHeight: "1rem" }], // 12px 0.75rem
+        sm: ["1rem", { lineHeight: "1.25rem" }], // 16px 1rem
+        base: ["1.25rem", { lineHeight: "1.5rem" }], // 20px 1.25rem
+        lg: ["1.5rem", { lineHeight: "1.75rem" }], // 24px 1.5rem
+        xl: ["2rem", { lineHeight: "1.75rem" }], // 32px 2rem
+        "2xl": ["2.5rem", { lineHeight: "2rem" }], // 40px 2.5rem
+        "3xl": ["3rem", { lineHeight: "2.25rem" }], // 48px 3rem
+      },
       fontFamily: {
         sans: ["var(--font-jakarta)"],
         roadster: ["var(--font-roadster)", ...fontFamily.sans],
@@ -25,5 +40,41 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    // Responsive Typography
+    plugin(function ({ addUtilities, theme }) {
+      const fontSizes = Object.keys(theme("fontSize"));
+
+      const buildCSS = (fontSize: string): CSSRuleObject => {
+        const fsIndex = fontSizes.indexOf(fontSize);
+
+        if (fsIndex > 1) {
+          const desktop = fontSize;
+          const tablet = fontSizes[fsIndex - 1] ?? fontSize;
+          const mobile = fontSizes[fsIndex - 2] ?? fontSize;
+
+          return {
+            "font-size": theme(`fontSize.${mobile}`),
+            "@screen md": {
+              "font-size": theme(`fontSize.${tablet}`),
+            },
+            "@screen 2xl": {
+              "font-size": theme(`fontSize.${desktop}`),
+            },
+          };
+        }
+
+        return { "font-size": theme(`fontSize.${fontSize}`) };
+      };
+
+      addUtilities({
+        ".text-r-3xl": buildCSS("3xl"),
+        ".text-r-2xl": buildCSS("2xl"),
+        ".text-r-xl": buildCSS("xl"),
+        ".text-r-lg": buildCSS("lg"),
+        ".text-r-base": buildCSS("base"),
+        ".text-r-sm": buildCSS("sm"),
+      });
+    }),
+  ],
 } satisfies Config;