attempt to fix tailwindcss utlity class but no worky

eslint.config.js

@@ -1,29 +1,29 @@
-import js from '@eslint/js'
+import js from "@eslint/js";
-import globals from 'globals'
+import globals from "globals";
-import reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from 'eslint-plugin-react-refresh'
+import reactRefresh from "eslint-plugin-react-refresh";
-import { defineConfig, globalIgnores } from 'eslint/config'
+import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     extends: [
       js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs["recommended-latest"],
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
     rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
     },
   },
-])
+]);

src/App.jsx

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

src/index.css

@@ -1,14 +1,14 @@
 @import "tailwindcss";
 
+@theme {
+  --color-primary: rgba(15, 40, 98);
+  --color-secondary: rgba(79, 95, 118);
+  --color-accent: rgba(158, 54, 58);
+  --color-paragraph: rgba(255, 255, 255);
+  --color-background: rgba(9, 31, 54);
+}
+
 body {
   margin: 0;
   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 {
-  --color-paragraph: 255, 255, 255;
+  --color-primary: rgba(15, 40, 98);
-  --color-background: 9, 31, 54;
+  --color-secondary: rgba(79, 95, 118);
-  --color-primary: 15, 40, 98;
+  --color-accent: rgba(158, 54, 58);
-  --color-secondary: 79, 95, 118;
+  --color-paragraph: rgba(255, 255, 255);
-  --color-accent: 158, 54, 58;
+  --color-background: rgba(9, 31, 54);
 }