Add and config tailwind v4 and nuxtui 3

app.config.ts

@@ -7,12 +7,14 @@ export default defineAppConfig({
     fallback: "light", // Set the fallback to 'light' if system preference is not available
   },
   ui: {
-    primary: "green",
+    colors: {
-    gray: "cool",
+      primary: "emerald",
-
+      neutral: "slate",
+    },
     button: {
-      default: {
+      defaultVariants: {
-        color: "orange",
+        // Set default button color to neutral
+        // color: 'neutral'
       },
     },
   },

app.vue

@@ -1,7 +1,7 @@
 <template>
   <UApp>
     <NuxtLoadingIndicator />
-    <!-- <NuxtRouteAnnouncer /> -->
+    <NuxtRouteAnnouncer />
     <!-- <DevOnly> -->
     <!-- this component will only be rendered during development -->
     <!-- <LazyDebugBar /> -->

assets/css/tailwind.css

@@ -0,0 +1,12 @@
+/* @import "tailwindcss/tailwind.css"; */
+
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans: "Public Sans", sans-serif;
+}
+/* @variant {
+  
+} */
+/* @source  */

assets/tailwindcss/main.css

@@ -1,24 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* @import "tailwindcss"; */
-/* @import "@nuxt/ui"; */
-
-@theme {
-  --font-sans: 'Public Sans', sans-serif;
-
-  --breakpoint-3xl: 1920px;
-
-  --color-green-50: #EFFDF5;
-  --color-green-100: #D9FBE8;
-  --color-green-200: #B3F5D1;
-  --color-green-300: #75EDAE;
-  --color-green-400: #00DC82;
-  --color-green-500: #00C16A;
-  --color-green-600: #00A155;
-  --color-green-700: #007F45;
-  --color-green-800: #016538;
-  --color-green-900: #0A5331;
-  --color-green-950: #052E16;
-}

components/other/ColorModeButton.vue

@@ -0,0 +1,27 @@
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+      color="neutral"
+      variant="ghost"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="size-8" />
+    </template>
+  </ClientOnly>
+</template>

nuxt.config.ts

@@ -1,4 +1,4 @@
-import { fileURLToPath } from "url";
+// import { fileURLToPath } from "url";
 
 let sassEnvVariables = "";
 for (let e in import.meta.env) {
@@ -170,7 +170,7 @@ export default defineNuxtConfig({
   },
   css: [
     mainStyle,
-    // "~/assets/tailwindcss/main.css",
+    "~/assets/css/tailwind.css",
     "vue3-persian-datetime-picker/src/picker/assets/scss/style.scss",
   ],
   alias: {
@@ -212,12 +212,12 @@ export default defineNuxtConfig({
       },
     },
   },
-  postcss: {
+  // postcss: {
-    plugins: {
+  //   plugins: {
-      tailwindcss: {},
+  //     tailwindcss: {},
-      autoprefixer: {},
+  //     autoprefixer: {},
-    },
+  //   },
-  },
+  // },
 
   // "~": "/<srcDir>",
   // "@": "/<srcDir>",

package.json

@@ -36,8 +36,7 @@
     "jquery": "^3.7.1",
     "mammoth": "^1.8.0",
     "mitt": "^3.0.1",
-    "node-sass": "^9.0.0",
+    "nuxt": "^3.15.4",
-    "nuxt": "^3.13.0",
     "nuxt-echarts": "^0.2.3",
     "pinia-plugin-persistedstate": "^4.1.1",
     "qrcode": "^1.5.4",
@@ -72,10 +71,10 @@
     "happy-dom": "^15.11.0",
     "nuxt-moment-jalaali": "^1.6.2",
     "playwright-core": "^1.48.2",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.2",
     "postcss-import": "^16.1.0",
     "sass-embedded": "^1.78.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.6",
     "typescript": "^5.6.3",
     "vitest": "^2.1.4",
     "vue-tsc": "^2.1.6"

postcss.config.mjs

@@ -1 +0,0 @@
-export default {  plugins: {    "@tailwindcss/postcss": {},  }}

systems/hadith_ui

@@ -1 +1 @@
-Subproject commit 0fc599aeb7a76c637d379ca9f5f5b5a550f477be
+Subproject commit d1bab369112740397eadb89aa3439b713aafad64

tailwind.config.js

@@ -1,15 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: [
-      './components/**/*.{js,vue,ts}',
-      './layouts/**/*.vue',
-      './pages/**/*.vue',
-      './plugins/**/*.{js,ts}',
-      './app.vue',
-      './error.vue',
-    ],
-    theme: {
-      extend: {},
-    },
-    plugins: [],
-  };