diff --git a/src/index.js b/src/index.js
index 89b86e6..6ecfce6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 import plugin from "tailwindcss/plugin";
 import { materialColors, createSpacing } from "./lib";
-const boxShadows = require("./themes/shadows.json");
-const fontSize = require("./themes/fonts.json");
+import { boxShadow } from "./themes/shadows";
+import { fontSize } from "./themes/fonts";
 const pluginOptions = {
   prefix: "lk",
   baseColors: { primary: "", info: "", warning: "", error: "" },
@@ -55,9 +55,8 @@ module.exports = plugin.withOptions(
   },
   (options = pluginOptions) => {
     return {
-
       theme: {
-        boxShadow: boxShadows,
+        boxShadow: boxShadow,
         aspectRatio: {
           "16-9": "16 / 9",
           "4-3": "4 / 3",
@@ -65,7 +64,7 @@ module.exports = plugin.withOptions(
           "9-16": "9 / 16",
           "1-1": "1 / 1",
         },
-        fontSize: fontSize,
+        fontSize: fontSize(createSpacing(options)),
         extend: {
           padding: {
             mid: "100px",
diff --git a/src/themes/fonts.json b/src/themes/fonts.js
similarity index 95%
rename from src/themes/fonts.json
rename to src/themes/fonts.js
index a76141b..988f5cf 100644
--- a/src/themes/fonts.json
+++ b/src/themes/fonts.js
@@ -1,6 +1,6 @@
-{
+export const fontSize = (scaling) => ({
   "display-1": [
-    "4.235em",
+    `${scaling["lk-xl"]}em`,
     {
       "lineHeight": "1.129",
       "letterSpacing": "-0.022em",
@@ -95,4 +95,4 @@
       "fontWeight": "400"
     }
   ]
-}
+});
diff --git a/src/themes/shadows.js b/src/themes/shadows.js
new file mode 100644
index 0000000..faf3174
--- /dev/null
+++ b/src/themes/shadows.js
@@ -0,0 +1,7 @@
+export const boxShadow = () => ({
+  sm: "0 0 1px 0 rgb(0, 0, 0);",
+  md: "0 4px 6px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);",
+  lg: "0 11px 15px -3px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);",
+  xl: "0 20px 25px rgba(0, 0, 0, .2), 0 5px 11px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);",
+  "2xl": "0 25px 50px rgba(0, 0, 0, .35), 0 9px 18px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);"
+})
diff --git a/src/themes/shadows.json b/src/themes/shadows.json
deleted file mode 100644
index a860d3c..0000000
--- a/src/themes/shadows.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "sm": "0 0 1px 0 rgb(0, 0, 0);",
-  "md": "0 4px 6px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);",
-  "lg": "0 11px 15px -3px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);",
-  "xl": "0 20px 25px rgba(0, 0, 0, .2), 0 5px 11px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);",
-  "2xl": "0 25px 50px rgba(0, 0, 0, .35), 0 9px 18px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);"
-}
diff --git a/tests/index.vitest.js b/tests/index.vitest.js
index 0effb8f..51d8531 100644
--- a/tests/index.vitest.js
+++ b/tests/index.vitest.js
@@ -1,12 +1,10 @@
 const postcss = require("postcss");
 import { test, expect, describe, it } from "vitest";
 import tailwindcss from "tailwindcss";
-import cssnanoPlugin from "cssnano";
 import liftkittailwindcss from "../src";
 
-function generatePluginCSS({ content }) {
+async function generatePluginCSS({ content }) {
   return postcss([
-    cssnanoPlugin(),
     tailwindcss({ plugins: [liftkittailwindcss], content: [{ raw: content }] }),
   ])
     .process("@tailwind utilities; @tailwind components;", { from: undefined })
@@ -38,11 +36,9 @@ const testCases = {
 // Function to run tests for each attribute in the object of objects
 function mapAndTest(attrSet) {
   Object.entries(attrSet).forEach(([name, { content }]) => {
-    describe(`Tailwind CSS Plugin Test: ${name}`, () => {
-      it(`should generate the correct CSS for ${name}`, async () => {
-        const css = await generatePluginCSS({ content });
-        expect(css).toMatchFileSnapshot(`./snapshots/${name}.css`);
-      });
+    test(`Generate Tailwind CSS for ${name} with ${content}`, async () => {
+      const css = await generatePluginCSS({ content });
+      expect(css).toMatchFileSnapshot(`./snapshots/${name}.css`);
     });
   });
 }
diff --git a/tests/snapshots/fontsize.css b/tests/snapshots/fontsize.css
index 8cebcd1..7b186ed 100644
--- a/tests/snapshots/fontsize.css
+++ b/tests/snapshots/fontsize.css
@@ -1 +1 @@
-.text-body{font-size:1em;font-weight:400;letter-spacing:-.011em;line-height:1.618}.text-callout{font-size:.943em;letter-spacing:-.009em}.text-callout,.text-caption{font-weight:400;line-height:1.272}.text-caption{font-size:.786em;letter-spacing:-.007em}.text-display-1{font-size:4.235em;line-height:1.129}.text-display-1,.text-display-2{font-weight:400;letter-spacing:-.022em}.text-display-2{font-size:2.618em;line-height:1.272}.text-heading{font-size:1.129em;font-weight:600;letter-spacing:-.014em;line-height:1.272}.text-heading-sub{font-size:.885em;font-weight:400;letter-spacing:-.007em;line-height:1.272}.text-label{font-size:.835em;font-weight:500;letter-spacing:-.004em;line-height:1.272}.text-overline{font-size:.786em;letter-spacing:.0618em}.text-overline,.text-title-3{font-weight:400;line-height:1.272}.text-title-3{font-size:1.272em;letter-spacing:-.017em}
\ No newline at end of file
+.text-body{font-size:1em;font-weight:400;letter-spacing:-.011em;line-height:1.618}.text-callout{font-size:.943em;letter-spacing:-.009em}.text-callout,.text-caption{font-weight:400;line-height:1.272}.text-caption{font-size:.786em;letter-spacing:-.007em}.text-display-1{font-size:2.61792emem;line-height:1.129}.text-display-1,.text-display-2{font-weight:400;letter-spacing:-.022em}.text-display-2{font-size:2.618em;line-height:1.272}.text-heading{font-size:1.129em;font-weight:600;letter-spacing:-.014em;line-height:1.272}.text-heading-sub{font-size:.885em;font-weight:400;letter-spacing:-.007em;line-height:1.272}.text-label{font-size:.835em;font-weight:500;letter-spacing:-.004em;line-height:1.272}.text-overline{font-size:.786em;letter-spacing:.0618em}.text-overline,.text-title-3{font-weight:400;line-height:1.272}.text-title-3{font-size:1.272em;letter-spacing:-.017em}
\ No newline at end of file