feat: tailwind 4 in svelte

Author: peterpeterparker

templates/sveltekit-example/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-example/postcss.config.js

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

templates/sveltekit-example/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-example/src/lib/components/Backdrop.svelte

@@ -7,9 +7,7 @@
 </script>
 
 <div
-	class:backdrop-blur-sm={spinner}
-	class:backdrop-blur-xl={!spinner}
-	class="fixed inset-0 z-40 bg-white/30 flex items-center justify-center"
+	class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl"
 >
 	{#if spinner}
 		<div

templates/sveltekit-example/src/lib/components/Button.svelte

@@ -13,7 +13,7 @@
 <button
 	{onclick}
 	{disabled}
-	class={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-sm py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled === true ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}
+	class={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled === true ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}
 >
 	{@render children()}
 </button>

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

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

templates/sveltekit-example/src/lib/components/Modal.svelte

@@ -96,7 +96,7 @@
 	<div class="fixed inset-0 z-50 p-16 md:px-24 md:py-44 animate-fade" role="dialog">
 		<div class="relative w-full max-w-xl">
 			<textarea
-				class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-none"
+				class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
 				rows={7}
 				placeholder="Your diary entry"
 				bind:value={inputText}

templates/sveltekit-example/src/lib/components/Table.svelte

@@ -37,7 +37,7 @@
 	<div class="py-2" role="rowgroup">
 		{#each items as item, index}
 			<div
-				class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 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]"
+				class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 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]"
 				role="row"
 			>
 				<span role="cell" aria-rowindex={index} class="p-1 flex align-center min-w-max">

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

@@ -26,7 +26,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-bold tracking-tight md:pt-24">
 			Example App
 		</h1>

templates/sveltekit-example/tailwind.config.js

@@ -8,13 +8,9 @@ export default {
 			sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans]
 		},
 		extend: {
-			screens: {
-				tall: { raw: '(min-height: 800px)' }
-			},
 			animation: {
 				fade: 'fadeIn .25s ease-in-out'
 			},
-
 			keyframes: {
 				fadeIn: {
 					from: { opacity: '0' },