diff --git a/app/globals.css b/app/globals.css
deleted file mode 100644
index 37d72f8..0000000
--- a/app/globals.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@import 'tailwindcss';
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..37eb466
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config '../tailwind.config.ts';
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..d316732
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,71 @@
+import { theme } from '@jects/jds/tokens';
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+
+const config: Config = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    '../../packages/jds/src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        semantic: theme.color.semantic,
+        primitive: theme.colorPrimitive.primitive,
+      },
+      spacing: {
+        ...theme.scheme.semantic.spacing,
+        ...theme.scheme.semantic.margin,
+      },
+      borderRadius: theme.scheme.semantic.radius,
+      borderWidth: theme.scheme.semantic.strokeWeight,
+      opacity: theme.scheme.semantic.opacity,
+      fontFamily: theme.typo.primitive.typeface,
+      fontSize: {
+        ...theme.typo.primitive.fontSize,
+      },
+      lineHeight: {
+        ...theme.typo.primitive.font.lineHeight,
+      },
+      letterSpacing: {
+        ...theme.typo.primitive.font.letterSpacing,
+      },
+      transitionDuration: theme.environment.semantic.duration,
+      transitionTimingFunction: theme.environment.semantic.motion,
+      screens: {
+        mobile: '320px',
+        tablet: '768px',
+        desktop: '1200px',
+      },
+    },
+  },
+  plugins: [
+    plugin(({ addUtilities }) => {
+      const textStyleUtilities = Object.entries(theme.textStyle).reduce(
+        (acc, [key, styleObj]) => {
+          const styles: Record<string, string> = {
+            fontSize: styleObj.fontSize,
+            lineHeight: styleObj.lineHeight,
+            fontFamily: styleObj.fontFamily,
+            fontWeight: styleObj.fontWeight,
+            letterSpacing: styleObj.letterSpacing,
+          };
+
+          if (styleObj.paragraphIndent !== '0px') {
+            styles.textIndent = styleObj.paragraphIndent;
+          }
+
+          acc[`.${key}`] = styles;
+
+          return acc;
+        },
+        {} as Record<string, Record<string, string>>,
+      );
+
+      addUtilities(textStyleUtilities);
+    }),
+  ],
+};
+
+export default config;