diff --git a/templates/react-starter/package.json b/templates/react-starter/package.json
index b9e9398..1d35a28 100644
--- a/templates/react-starter/package.json
+++ b/templates/react-starter/package.json
@@ -22,6 +22,7 @@
     "@junobuild/config": "^0.1.0",
     "@junobuild/vite-plugin": "^0.0.19",
     "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.5",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/templates/react-starter/src/index.css b/templates/react-starter/src/index.css
index 43131d1..db4eeb6 100644
--- a/templates/react-starter/src/index.css
+++ b/templates/react-starter/src/index.css
@@ -14,3 +14,29 @@
   font-weight: 800;
   src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2');
 }
+
+@theme {
+  --font-display: 'JetBrains Mono', sans-serif;
+
+  --color-*: initial;
+  --color-inherit: inherit;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-black: rgb(0 0 0);
+  --color-white: rgb(255 255 255);
+
+  --color-lavender-blue-50: #f2f3ff;
+  --color-lavender-blue-100: #e4e7ff;
+  --color-lavender-blue-200: #c9cfff;
+  --color-lavender-blue-300: #aeb8ff;
+  --color-lavender-blue-400: #93a0ff;
+  --color-lavender-blue-500: #7888ff;
+  --color-lavender-blue-600: #606dcc;
+  --color-lavender-blue-700: #485299;
+  --color-lavender-blue-800: #303666;
+  --color-lavender-blue-900: #181b33;
+}
+
+html {
+  font-family: var(--font-display);
+}
\ No newline at end of file
diff --git a/templates/react-starter/tailwind.config.js b/templates/react-starter/tailwind.config.js
index 2ab3234..cd22b8d 100644
--- a/templates/react-starter/tailwind.config.js
+++ b/templates/react-starter/tailwind.config.js
@@ -1,30 +1,5 @@
-import {fontFamily} from 'tailwindcss/defaultTheme';
-
 /** @type {import('tailwindcss').Config} */
+
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    fontFamily: {
-      sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans]
-    },
-    colors: {
-      inherit: 'inherit',
-      transparent: 'transparent',
-      current: 'currentColor',
-      black: 'rgb(0 0 0)',
-      white: 'rgb(255 255 255)',
-      ['lavender-blue']: {
-        50: '#f2f3ff',
-        100: '#e4e7ff',
-        200: '#c9cfff',
-        300: '#aeb8ff',
-        400: '#93a0ff',
-        500: '#7888ff',
-        600: '#606dcc',
-        700: '#485299',
-        800: '#303666',
-        900: '#181b33'
-      }
-    }
-  }
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']
 };
diff --git a/templates/react-starter/vite.config.js b/templates/react-starter/vite.config.js
index 1b105a9..ef2de27 100644
--- a/templates/react-starter/vite.config.js
+++ b/templates/react-starter/vite.config.js
@@ -2,8 +2,9 @@ import juno from '@junobuild/vite-plugin';
 import react from '@vitejs/plugin-react';
 import {defineConfig} from 'vite';
 import {nodePolyfills} from 'vite-plugin-node-polyfills';
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), nodePolyfills(), juno({container: true})]
+  plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()]
 });