From 4e64b820a8e268aa446d0ec513891fcae7143260 Mon Sep 17 00:00:00 2001 From: Kleo Dev Date: Thu, 21 Aug 2025 16:19:59 +0200 Subject: [PATCH] Working tailwind --- package-lock.json | 26 +++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 25 ++++++++++++++++++++++-- src/index.css | 49 ++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 96 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 80da375..f48823e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e2bb69c..2334908 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index dc63cb2..ad261b0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,28 @@ export default function App() { return ( -
-

Hello Tailwind 4 + Vite!

+
+
+ + +
); } + +/* +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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_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" +*/ diff --git a/src/index.css b/src/index.css index bd6213e..675ba5f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,46 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file +@import "tailwindcss"; + +: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%; +} \ No newline at end of file