Working tailwind

package-lock.json

@@ -8,6 +8,7 @@
       "name": "saturn-launcher",
       "version": "0.1.0",
       "dependencies": {
+        "@tailwindcss/postcss": "^4.1.12",
         "@tailwindcss/vite": "^4.1.12",
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-opener": "^2",
@@ -26,6 +27,18 @@
         "vite": "^7.0.4"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1310,6 +1323,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.12.tgz",
+      "integrity": "sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.12",
+        "@tailwindcss/oxide": "4.1.12",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.12"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.12.tgz",

package.json

@@ -10,6 +10,7 @@
     "tauri": "env GDK_BACKEND=x11 WEBKIT_DISABLE_DMABUF_RENDERER=1 tauri"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.12",
     "@tailwindcss/vite": "^4.1.12",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",

src/App.tsx

@@ -1,7 +1,28 @@
 export default function App() {
   return (
-    <div className="h-screen bg-black p-6">
+    <div className="bg-[hsl(var(--background))] h-screen">
-      <h1 className="text-5xl font-bold text-white">Hello Tailwind 4 + Vite!</h1>
+      <div className="bg-[hsl(var(--card))) p-5 w-52">
+        <button
+          className="
+            inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg
+            transition-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2
+            disabled:pointer-events-none disabled:opacity-50
+            [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+            bg-gradient-to-r from-[hsl(var(--saturn-gold))] to-[hsl(var(--saturn-orange))]
+            text-[hsl(var(--space-dark))]
+            hover:from-[hsl(var(--saturn-amber))] hover:to-[hsl(var(--saturn-gold))]
+            shadow-[var(--glow-saturn)]
+            font-bold text-lg h-10 px-4 py-2 flex-1
+          "
+        >
+          LAUNCH
+        </button>
+
+      </div>
     </div>
   );
 }
+
+/*
+class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-gradient-to-r from-saturn-gold to-saturn-orange text-space-dark hover:from-saturn-amber hover:to-saturn-gold saturn-glow font-bold text-lg h-10 px-4 py-2 flex-1"
+*/

src/index.css

@@ -1,3 +1,46 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+:root {
+    --background: 240 20% 8%;
+    --foreground: 45 100% 95%;
+    --saturn-gold: 45 95% 68%;
+    --saturn-orange: 25 95% 65%;
+    --saturn-amber: 35 90% 72%;
+    --space-purple: 270 70% 25%;
+    --space-blue: 240 80% 30%;
+    --cosmic-dark: 250 25% 12%;
+    --card: 250 25% 12%;
+    --card-foreground: 45 100% 95%;
+    --popover: 250 30% 10%;
+    --popover-foreground: 45 100% 95%;
+    --primary: 45 95% 68%;
+    --primary-foreground: 250 25% 12%;
+    --secondary: 270 70% 25%;
+    --secondary-foreground: 45 100% 95%;
+    --muted: 250 20% 18%;
+    --muted-foreground: 45 60% 75%;
+    --accent: 240 80% 30%;
+    --accent-foreground: 45 100% 95%;
+    --destructive: 0 75% 55%;
+    --destructive-foreground: 45 100% 95%;
+    --border: 250 20% 20%;
+    --input: 250 20% 15%;
+    --ring: 45 95% 68%;
+    --radius: .75rem;
+    --gradient-cosmic: linear-gradient(135deg, hsl(var(--space-purple)), hsl(var(--space-blue)));
+    --gradient-saturn: linear-gradient(90deg, hsl(var(--saturn-gold)), hsl(var(--saturn-orange)));
+    --gradient-glass: linear-gradient(135deg, hsl(var(--card) / .8), hsl(var(--card) / .3));
+    --glow-saturn: 0 0 30px hsl(var(--saturn-gold) / .5);
+    --glow-cosmic: 0 0 40px hsl(var(--accent) / .3);
+    --shadow-glass: 0 8px 32px hsl(0 0% 0% / .3);
+    --transition-smooth: all .4s cubic-bezier(.4, 0, .2, 1);
+    --transition-glow: box-shadow .3s ease;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+}