fix: css

client/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 @font-face {
@@ -165,10 +169,6 @@ html {
     min-height: 200px;
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer base {
     html {
         @apply font-sans bg-gray-900 text-gray-100;

package.json

@@ -97,7 +97,7 @@
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
     "tailwindcss": "^3.4.14",
-    "vite": "^4.2.1",
+    "vite": "^5.4.10",
     "zustand": "^5.0.0"
   },
   "lint-staged": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

tailwind.config.js

@@ -2,7 +2,7 @@ const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./client/**/*.{js,jsx}', './client/**/*.html'],
+    content: ['./client/**/*.{js,jsx}', , './client/**/*.html'],
     darkMode: 'class',
     theme: {
         extend: {

vite.config.js

@@ -1,19 +1,23 @@
-import reactVite from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-
+import react from '@vitejs/plugin-react';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
 
 const path = fileURLToPath(import.meta.url);
 const root = resolve(dirname(path), 'client');
 
-export default defineConfig(() => {
-    return {
-        root,
-        build: {
-            outDir: 'build',
+import tailwindcss from 'tailwindcss';
+
+export default defineConfig({
+    root,
+    build: {
+        outDir: 'build',
+    },
+    publicDir: 'public',
+    plugins: [react()],
+    css: {
+        postcss: {
+            plugins: [tailwindcss()],
         },
-        publicDir: 'public',
-        plugins: [reactVite({ jsxRuntime: 'automatic' })],
-    };
+    },
 });