tailwind 4 upgrade + update js deps

beszel/site/package.json

@@ -43,7 +43,7 @@
 		"react": "^19.1.1",
 		"react-dom": "^19.1.1",
 		"recharts": "^2.15.4",
-		"tailwind-merge": "^2.6.0",
+		"tailwind-merge": "^3.3.1",
 		"valibot": "^0.42.1"
 	},
 	"devDependencies": {
@@ -51,17 +51,15 @@
 		"@lingui/swc-plugin": "^5.6.1",
 		"@lingui/vite-plugin": "^5.4.1",
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@tailwindcss/postcss": "^4.1.12",
+		"@tailwindcss/vite": "^4.1.12",
 		"@types/bun": "^1.2.20",
-		"@types/react": "^18.3.24",
+		"@types/react": "^19.1.11",
-		"@types/react-dom": "^18.3.7",
+		"@types/react-dom": "^19.1.7",
-		"@vitejs/plugin-react-swc": "^3.11.0",
+		"@vitejs/plugin-react-swc": "^4.0.1",
-		"postcss": "^8.5.6",
 		"tailwindcss": "^4.1.12",
-		"tailwindcss-rtl": "^0.9.0",
 		"tw-animate-css": "^1.3.7",
 		"typescript": "^5.9.2",
-		"vite": "^6.3.5"
+		"vite": "^7.1.3"
 	},
 	"overrides": {
 		"@nanostores/router": {

beszel/site/postcss.config.js

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

beszel/site/src/components/charts/area-chart.tsx

@@ -70,7 +70,7 @@ export default function AreaChartDefault({
 							}
 						/>
 						{dataPoints?.map((dataPoint, i) => {
-							const color = `hsl(var(--chart-${dataPoint.color}))`
+							const color = `var(--chart-${dataPoint.color})`
 							return (
 								<Area
 									key={i}

beszel/site/src/components/charts/disk-chart.tsx

@@ -69,9 +69,9 @@ export default memo(function DiskChart({
 						dataKey={dataKey}
 						name={t`Disk Usage`}
 						type="monotoneX"
-						fill="hsl(var(--chart-4))"
+						fill="var(--chart-4)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-4))"
+						stroke="var(--chart-4)"
 						// animationDuration={1200}
 						isAnimationActive={false}
 					/>

beszel/site/src/components/charts/mem-chart.tsx

@@ -68,9 +68,9 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						order={3}
 						dataKey="stats.mu"
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
+						fill="var(--chart-2)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-2))"
+						stroke="var(--chart-2)"
 						stackId="1"
 						isAnimationActive={false}
 					/>

beszel/site/src/components/charts/swap-chart.tsx

@@ -58,9 +58,9 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
 						dataKey="stats.su"
 						name={t`Used`}
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
+						fill="var(--chart-2)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-2))"
+						stroke="var(--chart-2)"
 						isAnimationActive={false}
 					/>
 				</AreaChart>

beszel/site/src/components/routes/home.tsx

@@ -14,7 +14,7 @@ import { alertInfo } from "@/lib/alerts"
 
 const SystemsTable = lazy(() => import("../systems-table/systems-table"))
 
-export const Home = memo(() => {
+export default memo(function () {
 	const { t } = useLingui()
 
 	useEffect(() => {
@@ -106,7 +106,7 @@ const ActiveAlerts = () => {
 								return (
 									<Alert
 										key={alert.id}
-										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10  hover:shadow-md shadow-black"
+										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10 hover:shadow-md shadow-black/5"
 									>
 										<info.icon className="h-4 w-4" />
 										<AlertTitle>

beszel/site/src/components/systems-table/systems-table-columns.tsx

@@ -269,7 +269,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 				}
 				const system = info.row.original
 				return (
-					<span className={cn("flex gap-2 items-center md:pe-5 tabular-nums", viewMode === "table" && "ps-0.5")}>
+					<span className={cn("flex gap-1.5 items-center md:pe-5 tabular-nums", viewMode === "table" && "ps-0.5")}>
 						<IndicatorDot
 							system={system}
 							className={

beszel/site/src/index.css

@@ -1,73 +1,107 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@config '../tailwind.config.js';
+@custom-variant dark (&:is(.dark *));
 
-@utility link {
+:root {
-	@apply text-primary font-medium underline-offset-4 hover:underline;
+	--background: hsl(30 8% 98%);
-}
+	--foreground: hsl(30 0% 0%);
-
+	--card: hsl(30 0% 100%);
-@utility ns-dialog {
+	--card-foreground: hsl(240 6.67% 2.94%);
-	/* New system dialog width */
+	--popover: hsl(30 0% 100%);
-	min-width: 30.3rem;
+	--popover-foreground: hsl(240 10% 6.2%);
-	:where(:lang(zh), :lang(zh-CN), :lang(ko)) & {
+	--primary: hsl(240 5.88% 10%);
-		min-width: 27.9rem;
+	--primary-foreground: hsl(30 0% 100%);
-	}
+	--secondary: hsl(240 4.76% 95.88%);
-}
+	--secondary-foreground: hsl(240 5.88% 10%);
-
+	--muted: hsl(26 6% 94%);
-@layer base {
+	--muted-foreground: hsl(24 2.79% 35.1%);
-	:root {
+	--accent: hsl(20 23.08% 94%);
-		--background: 30 8% 98%;
+	--accent-foreground: hsl(240 5.88% 10%);
-		--foreground: 30 0% 0%;
+	--destructive: hsl(0 66% 53%);
-		--card: 30 0% 100%;
+	--destructive-foreground: hsl(0 0% 98.04%);
-		--card-foreground: 240 6.67% 2.94%;
+	--border: hsl(30 8.11% 85.49%);
-		--popover: 30 0% 100%;
+	--input: hsl(30 4.29% 72.55%);
-		--popover-foreground: 240 10% 6.2%;
+	--ring: hsl(30 3.97% 49.41%);
-		--primary: 240 5.88% 10%;
-		--primary-foreground: 30 0% 100%;
-		--secondary: 240 4.76% 95.88%;
-		--secondary-foreground: 240 5.88% 10%;
-		--muted: 26 6% 94%;
-		--muted-foreground: 24 2.79% 35.1%;
-		--accent: 20 23.08% 94%;
-		--accent-foreground: 240 5.88% 10%;
-		--destructive: 0 66% 53%;
-		--destructive-foreground: 0 0% 98.04%;
-		--border: 30 8.11% 85.49%;
-		--input: 30 4.29% 72.55%;
-		--ring: 30 3.97% 49.41%;
 	--radius: 0.8rem;
-		/* charts */
+	--chart-1: hsl(220 70% 50%);
-		--chart-1: 220 70% 50%;
+	--chart-2: hsl(160 60% 45%);
-		--chart-2: 160 60% 45%;
+	--chart-3: hsl(30 80% 55%);
-		--chart-3: 30 80% 55%;
+	--chart-4: hsl(280 65% 60%);
-		--chart-4: 280 65% 60%;
+	--chart-5: hsl(340 75% 55%);
-		--chart-5: 340 75% 55%;
+}
-	}
 
-	.dark {
+.dark {
 	color-scheme: dark;
-		--background: 220 5.5% 9%;
+	--background: hsl(220 5.5% 9%);
-		--foreground: 220 2% 97%;
+	--foreground: hsl(220 2% 97%);
-		--card: 220 5.5% 10.5%;
+	--card: hsl(220 5.5% 10.5%);
-		--card-foreground: 220 2% 97%;
+	--card-foreground: hsl(220 2% 97%);
-		--popover: 220 5.5% 9%;
+	--popover: hsl(220 5.5% 9%);
-		--popover-foreground: 220 2% 97%;
+	--popover-foreground: hsl(220 2% 97%);
-		--primary: 220 2% 96%;
+	--primary: hsl(220 2% 96%);
-		--primary-foreground: 220 4% 10%;
+	--primary-foreground: hsl(220 4% 10%);
-		--secondary: 220 4% 16%;
+	--secondary: hsl(220 4% 16%);
-		--secondary-foreground: 220 0% 98%;
+	--secondary-foreground: hsl(220 0% 98%);
-		--muted: 220 6% 16%;
+	--muted: hsl(220 6% 16%);
-		--muted-foreground: 220 4% 67%;
+	--muted-foreground: hsl(220 4% 67%);
-		--accent: 220 5% 15.5%;
+	--accent: hsl(220 5% 15.5%);
-		--accent-foreground: 220 2% 98%;
+	--accent-foreground: hsl(220 2% 98%);
-		--destructive: 0 62% 46%;
+	--destructive: hsl(0 62% 46%);
-		--destructive-foreground: 0 0% 97%;
+	--destructive-foreground: hsl(0 0% 97%);
-		--border: 220 3% 16%;
+	--border: hsl(220 3% 16%);
-		--input: 220 4% 22%;
+	--input: hsl(220 4% 22%);
-		--ring: 220 4% 80%;
+	--ring: hsl(220 4% 80%);
 	--radius: 0.8rem;
-	}
+}
+
+@theme inline {
+	--font-sans: Inter, InterVariable, sans-serif;
+
+	--breakpoint-xs: 26.6rem;
+	--breakpoint-450: 28rem;
+	--breakpoint-2xl: 90rem;
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--color-green-50: hsl(140 60% 95%);
+	--color-green-100: hsl(140 50% 90%);
+	--color-green-200: hsl(140 49% 80%);
+	--color-green-300: hsl(140 48% 70%);
+	--color-green-400: hsl(140 49% 60%);
+	--color-green-500: hsl(140 50% 48%);
+	--color-green-600: hsl(140 52% 38%);
+	--color-green-700: hsl(140 53% 29%);
+	--color-green-800: hsl(140 54% 20%);
+	--color-green-900: hsl(140 54% 12%);
+	--color-green-950: hsl(140 57% 6%);
+
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
 }
 
 @layer utilities {
@@ -88,7 +122,7 @@
 
 @layer base {
 	* {
-		@apply border-border;
+		@apply border-border outline-ring/50;
 		overflow-anchor: none;
 	}
 	body {
@@ -99,6 +133,22 @@
 	}
 }
 
+@utility container {
+	@apply max-w-360 mx-auto px-4;
+}
+
+@utility link {
+	@apply text-primary font-medium underline-offset-4 hover:underline;
+}
+
+@utility ns-dialog {
+	/* New system dialog width */
+	min-width: 30.3rem;
+	:where(:lang(zh), :lang(zh-CN), :lang(ko)) & {
+		min-width: 27.9rem;
+	}
+}
+
 .recharts-tooltip-wrapper {
 	z-index: 1;
 	@apply tabular-nums;

beszel/site/src/main.tsx

@@ -2,7 +2,7 @@ import "./index.css"
 // import { Suspense, lazy, useEffect, StrictMode } from "react"
 import { Suspense, lazy, memo, useEffect } from "react"
 import ReactDOM from "react-dom/client"
-import { Home } from "./components/routes/home.tsx"
+import Home from "./components/routes/home.tsx"
 import { ThemeProvider } from "./components/theme-provider.tsx"
 import { DirectionProvider } from "@radix-ui/react-direction"
 import { $authenticated, $systems, pb, $publicKey, $copyContent, $direction } from "./lib/stores.ts"

beszel/site/tailwind.config.js

@@ -1,104 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	darkMode: ["class"],
-	content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
-	prefix: "",
-	theme: {
-		container: {
-			center: true,
-			padding: "1rem",
-			screens: {
-				"2xl": "1440px",
-			},
-		},
-		extend: {
-			fontFamily: {
-				sans: "Inter, sans-serif",
-				// body: ['Inter', 'sans-serif'],
-				// display: ['Inter', 'sans-serif'],
-			},
-			screens: {
-				xs: "425px",
-				450: "450px",
-			},
-			colors: {
-				green: {
-					50: "#EBF9F0",
-					100: "#D8F3E1",
-					200: "#ADE6C0",
-					300: "#85DBA2",
-					400: "#5ACE81",
-					500: "#38BB63",
-					600: "#2D954F",
-					700: "#22723D",
-					800: "#164B28",
-					900: "#0C2715",
-					950: "#06140A",
-				},
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
-				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))",
-				},
-				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
-				},
-			},
-			transitionDuration: {
-				50: "50ms",
-			},
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)",
-			},
-			keyframes: {
-				"accordion-down": {
-					from: { height: "0" },
-					to: { height: "var(--radix-accordion-content-height)" },
-				},
-				"accordion-up": {
-					from: { height: "var(--radix-accordion-content-height)" },
-					to: { height: "0" },
-				},
-			},
-			animation: {
-				"accordion-down": "accordion-down 0.2s ease-out",
-				"accordion-up": "accordion-up 0.2s ease-out",
-			},
-		},
-	},
-	plugins: [
-		// require("@tailwindcss/container-queries"),
-		// require("tailwindcss-animate"),
-		// require("tailwindcss-rtl"),
-		// function ({ addVariant }) {
-		// 	addVariant("light", ".light &")
-		// },
-	],
-}

beszel/site/tsconfig.json

@@ -7,5 +7,11 @@
 		{
 			"path": "./tsconfig.node.json"
 		}
-	]
+	],
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	}
 }

beszel/site/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite"
 import path from "path"
+import tailwindcss from "@tailwindcss/vite"
 import react from "@vitejs/plugin-react-swc"
 import { lingui } from "@lingui/vite-plugin"
 import { version } from "./package.json"
@@ -11,6 +12,7 @@ export default defineConfig({
 			plugins: [["@lingui/swc-plugin", {}]],
 		}),
 		lingui(),
+		tailwindcss(),
 		{
 			name: "replace version in index.html during dev",
 			apply: "serve",