feat: tailwind 4 in svelte

Author: peterpeterparker

templates/sveltekit-starter/package.json

@@ -19,8 +19,8 @@
 		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@tailwindcss/postcss": "^4.0.0",
 		"@types/eslint": "^9.6.1",
-		"autoprefixer": "^10.4.20",
 		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -30,7 +30,7 @@
 		"prettier-plugin-svelte": "^3.3.2",
 		"svelte": "^5.7.1",
 		"svelte-check": "^4.1.1",
-		"tailwindcss": "^3.4.16",
+		"tailwindcss": "^4.0.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.17.0",

templates/sveltekit-starter/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
 	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
+		'@tailwindcss/postcss': {}
 	}
 };

templates/sveltekit-starter/src/app.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.js';
 
 @font-face {
 	font-family: 'JetBrains Mono';

templates/sveltekit-starter/src/lib/components/Article.svelte

@@ -16,10 +16,10 @@
 	rel="noreferrer noopener"
 	target="_blank"
 	aria-label={ariaLabel}
-	class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+	class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
 >
 	<h4
-		class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 group-hover:dark:text-white"
+		class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white"
 	>
 		{title}
 	</h4>

templates/sveltekit-starter/src/lib/components/Footer.svelte

@@ -1,5 +1,5 @@
 <footer
-	class="mx-auto max-w-screen-2xl py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
+	class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
 >
 	<span class="flex gap-2 items-baseline">
 		<svg

templates/sveltekit-starter/src/lib/components/Hero.svelte

@@ -15,7 +15,7 @@
 	rel="noreferrer noopener"
 	target="_blank"
 	aria-label={ariaLabel}
-	class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
+	class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
 >
 	{@render children()}
 </a>

templates/sveltekit-starter/src/routes/+layout.svelte

@@ -22,7 +22,9 @@
 </script>
 
 <div class="relative isolate min-h-[100dvh]">
-	<main class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
+	<main
+		class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
+	>
 		<h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome to Juno</h1>
 
 		<div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">