diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..e803330
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,68 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#0052ff',
+          hover: '#3761ff',
+          light: 'rgba(0, 82, 255, 0.1)',
+        },
+        success: {
+          DEFAULT: '#00c853',
+          hover: '#00b14a',
+        },
+        danger: {
+          DEFAULT: '#ff3d00',
+          hover: '#e63600',
+        },
+        warning: '#ffb300',
+        bg: '#f5f5f5',
+        surface: '#ffffff',
+        border: '#e5e5e5',
+        text: {
+          primary: '#1a1a1a',
+          secondary: '#737373',
+          disabled: '#a3a3a3',
+        },
+      },
+      borderRadius: {
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+      },
+      boxShadow: {
+        sm: '0 2px 8px rgba(0, 0, 0, 0.06)',
+        md: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        lg: '0 8px 24px rgba(0, 0, 0, 0.15)',
+      },
+      spacing: {
+        '1': '4px',
+        'xs': '4px',
+        '2': '8px',
+        'sm': '8px',
+        '3': '12px',
+        'md': '16px',
+        '4': '16px',
+        '5': '20px',
+        '6': '24px',
+        'lg': '24px',
+        '8': '32px',
+        '10': '40px',
+        'xl': '48px',
+      },
+      maxWidth: {
+        'lg': '1280px',
+        'xl': '1440px',
+        'xxl': '1680px',
+      },
+    },
+  },
+  plugins: [],
+}