Merge pull request #10 from foundersandcoders:tailwind

Setup Tailwind CSS v4 with Custom Theme

Author: JasonWarrenUK

package-lock.json

@@ -27,24 +27,27 @@
 		"@tailwindcss/vite": "^4.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.8",
+		"autoprefixer": "^10.4.21",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
+		"postcss": "^8.5.4",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"supabase": "^2.24.3",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
+		"tailwindcss": "^4.1.8",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^6.2.6",
 		"vitest": "^3.0.0"
 	},
 	"dependencies": {
+		"@fontsource/metropolis": "^5.2.5",
 		"@supabase/supabase-js": "^2.49.8",
 		"dotenv": "^16.5.0"
 	}

package.json

@@ -1,3 +1,23 @@
 @import 'tailwindcss';
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
+@import '@fontsource/metropolis';
+
+@theme {
+	--pink: #d600a8;
+	--black: #000000;
+	--white: #ffffff;
+	--light-pink: #ff2ed2;
+	--teal: #00a7a8;
+	--yellow: #ffcb00;
+	--orange: #ec5d2a;
+	--green: #29e2a3;
+	--purple: #7900d6;
+	--bright-blue: #2235e2;
+	--dark-purple: #4d1b9b;
+	--font-family-sans: Metropolis, Arial;
+}
+
+body {
+	background-color: var(--white);
+	color: var(--black);
+	font-family: var(--font-family-sans);
+}

src/app.css

@@ -1,2 +1,4 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<p>
+	Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
+</p>