fix(tailwindcss): tailwindcss works with vite, no custom theme

src/App.jsx

@@ -1,10 +1,10 @@
-import { useState } from "react";
+import React from "react";
 
 function App() {
   return (
-    <>
-      <p className="text-xl text-primary">heyo</p>
-    </>
+    <div className="min-h-screen bg-blue-500 flex items-center justify-center">
+      <p className="text-3xl font-bold text-primary">Hello, world!</p>
+    </div>
   );
 }
 

src/index.css

@@ -1,16 +1,14 @@
-@import "./styles/theme.css" layer(theme);
 @import "tailwindcss";
-@layer theme, components;
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 body {
   margin: 0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   background: rgba(var(--background));
 }
+
+@theme {
+  --color-primary: 15, 40, 98;
+  --color-secondary: 79, 95, 118;
+  --color-accent: 158, 54, 58;
+  --color-paragraph: 255, 255, 255;
+  --color-background: 9, 31, 54;
+}

src/styles/theme.css

@@ -1,7 +1,7 @@
 @theme {
-  --paragraph: 255, 255, 255;
-  --background: 9, 31, 54;
-  --primary: 15, 40, 98;
-  --secondary: 79, 95, 118;
-  --accent: 158, 54, 58;
+  --color-paragraph: 255, 255, 255;
+  --color-background: 9, 31, 54;
+  --color-primary: 15, 40, 98;
+  --color-secondary: 79, 95, 118;
+  --color-accent: 158, 54, 58;
 }