chore: fix shadcn/ui not applying styling

https://stackoverflow.com/a/79431749

rebase

app/styles/global.css

@@ -1,6 +1,5 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+@config "../../tailwind.config.ts";
-@tailwind utilities;
 
 @layer base {
 	:root {
@@ -66,3 +65,25 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+html {
+	scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: hsl(var(--muted));
+}
+
+::-webkit-scrollbar-thumb {
+	background: hsl(var(--border));
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: hsl(var(--muted-foreground));
+}

components.json

@@ -11,11 +11,11 @@
 		"prefix": ""
 	},
 	"aliases": {
-		"components": "~/components",
+		"components": "@/components",
-		"utils": "~/lib/utils",
+		"utils": "@/lib/utils",
-		"ui": "~/components/ui",
+		"ui": "@/components/ui",
-		"lib": "~/lib",
+		"lib": "@/lib",
-		"hooks": "~/hooks"
+		"hooks": "@/hooks"
 	},
 	"iconLibrary": "lucide"
 }

package.json

@@ -42,10 +42,12 @@
 	},
 	"devDependencies": {
 		"@remix-run/dev": "^2.16.8",
+		"@tailwindcss/postcss": "^4.1.8",
 		"@types/react": "^19.1.6",
 		"@types/react-dom": "^19.1.6",
+		"autoprefixer": "^10.4.21",
 		"eslint": "^9.28.0",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.1.8",
 		"typescript": "^5.8.3",
 		"vite": "^6.3.5",
 		"vite-tsconfig-paths": "^5.1.4"

postcss.config.ts

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		"@tailwindcss/postcss": require("@tailwindcss/postcss"),
+		autoprefixer: require("autoprefixer"),
+	},
+};

tailwind.config.ts

@@ -1,8 +1,11 @@
 import type { Config } from "tailwindcss";
 
 export default {
-	darkMode: ["class"],
+	darkMode: "class",
-	content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
+	content: [
+		"./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
+		"./app/**/*.{js,jsx,ts,tsx}",
+	],
 	theme: {
 		extend: {
 			borderRadius: {