Working tailwind

This commit is contained in:
2025-08-21 16:19:59 +02:00
parent b88cbaf816
commit 4e64b820a8
4 changed files with 96 additions and 5 deletions
+23 -2
View File
@@ -1,7 +1,28 @@
export default function App() {
return (
<div className="h-screen bg-black p-6">
<h1 className="text-5xl font-bold text-white">Hello Tailwind 4 + Vite!</h1>
<div className="bg-[hsl(var(--background))] h-screen">
<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"
*/