bump tailwind to v4

eslint.config.js

@@ -17,9 +17,6 @@ export default [
 				PaginationMeta: 'readonly',
 			},
 		},
-		rules: {
-			'svelte/block-lang': ['error', { script: 'ts', style: 'postcss' }],
-		},
 	},
 	{
 		ignores: [

package.json

@@ -4,8 +4,8 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && vite build --ssr",
-    "check": "php artisan ziggy:generate --types-only && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
-    "check:watch": "php artisan ziggy:generate --types-only && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "php artisan ziggy:generate --types-only && svelte-check --tsconfig ./tsconfig.json --diagnostic-sources js,svelte --fail-on-warnings",
+    "check:watch": "php artisan ziggy:generate --types-only && svelte-check --tsconfig ./tsconfig.json --diagnostic-sources js,svelte --watch",
     "lint": "eslint . --max-warnings 0",
     "show-bundle": "vite-bundle-visualizer"
   },
@@ -15,19 +15,18 @@
     "esm-env": "^1.2",
     "pretty-bytes": "^6.1",
     "svelte": "^5.7",
-    "tailwindcss": "^3.4"
+    "tailwindcss": "^4.0.0-beta.7"
   },
   "devDependencies": {
     "@jrmajor/eslint-config": "^0.0.6",
     "@stylistic/eslint-plugin": "^2.11",
     "@sveltejs/vite-plugin-svelte": "^5.0",
+    "@tailwindcss/vite": "^4.0.0-beta.7",
     "@types/node": "^22.10",
-    "autoprefixer": "^10.4",
     "eslint": "^9.16",
     "eslint-plugin-svelte": "^2.46",
     "globals": "^15.13",
     "laravel-vite-plugin": "^1.1",
-    "postcss": "^8.4",
     "svelte-check": "^4.1",
     "typescript": "^5.7",
     "typescript-eslint": "^8.17",

resources/css/base.css

@@ -1,3 +1,92 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@source '../views';
+
+@plugin '@tailwindcss/forms';
+
+@theme {
+  --color-*: initial;
+  --color-inherit: inherit;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-brand-primary: #ffcc00;
+  --color-brand-lighter: #f6e05e;
+  --color-brand-primary-dark: #896f09;
+  --color-brand-lighter-dark: #847938;
+
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f7f7f7;
+  --color-gray-200: #ebebeb;
+  --color-gray-300: #dbdbdb;
+  --color-gray-400: #b3b3b3;
+  --color-gray-500: #808080;
+  --color-gray-600: #636363;
+  --color-gray-700: #525252;
+  --color-gray-800: #404040;
+  --color-gray-900: #2e2e2e;
+  --color-gray-950: #121212;
+
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+
+  --color-yellow-50: #fdfdea;
+  --color-yellow-100: #fdf6b2;
+  --color-yellow-200: #fce96a;
+  --color-yellow-300: #faca15;
+  --color-yellow-400: #e3a008;
+  --color-yellow-500: #c27803;
+  --color-yellow-600: #9f580a;
+  --color-yellow-700: #8e4b10;
+  --color-yellow-800: #723b13;
+  --color-yellow-900: #633112;
+
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  --font-sans: Inter var, ui-sans-serif, system-ui, sans-serif;
+
+  --text-2xs: 0.7rem;
+
+  --transition-property-colors-shadow:
+    color, background-color, border-color,
+    text-decoration-color, fill, stroke, box-shadow;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

resources/css/headers.css

@@ -1,13 +1,8 @@
-@layer utilities {
-  .shadow-link {
-    @apply relative after:block after:absolute after:z-[-1];
-  }
-
-  .shadow-link {
-    @apply after:bg-brand-lighter after:dark:bg-brand-lighter-dark;
-  }
+@utility shadow-link {
+  @apply relative after:block after:absolute after:z-[-1];
+  @apply after:bg-brand-lighter after:dark:bg-brand-lighter-dark;
 
-  .shadow-link::after {
+  &::after {
     top: calc(100% - 0.35rem);
     left: -0.25rem;
     width: calc(100% + 0.5rem);

resources/css/style.css

@@ -2,22 +2,22 @@
 @import './headers.css';
 @import './placeholders.css';
 
-@layer utilities {
-  .inset-shadow-light {
-    box-shadow: inset 0 0 0 theme('spacing.1') theme('colors.brand.lighter');
-  }
+@utility inset-shadow-light {
+  box-shadow: inset 0 0 0 var(--spacing-1) var(--colors-brand-lighter);
+}
+
+@utility inset-shadow-hard {
+  box-shadow: inset 0 0 0 var(--spacing-1) var(--colors-brand-primary);
+}
 
-  .inset-shadow-hard {
-    box-shadow: inset 0 0 0 theme('spacing.1') theme('colors.brand.primary');
-  }
+@utility form-input {
+  @apply rounded-md border-gray-300;
+  @apply dark:bg-gray-800 dark:border-gray-900 dark:focus:border-gray-700;
 }
 
-@layer components {
-  .form-input,
-  .form-select {
-    @apply rounded-md border-gray-300;
-    @apply dark:bg-gray-800 dark:border-gray-900 dark:focus:border-gray-700;
-  }
+@utility form-select {
+  @apply rounded-md border-gray-300;
+  @apply dark:bg-gray-800 dark:border-gray-900 dark:focus:border-gray-700;
 }
 
 #app {

resources/js/Components/Cropper/Cropper.svelte

@@ -160,7 +160,7 @@
 	>
 </div>
 
-<style lang="postcss">
+<style>
 	.cropper {
 		position: relative;
 	}

resources/js/Components/Images/ImageModal.svelte

@@ -64,7 +64,7 @@
 
 <dialog
 	bind:this={dialog}
-	class="max-h-full max-w-full overflow-visible bg-transparent p-0 outline-none backdrop:bg-black/90"
+	class="m-auto max-h-full max-w-full overflow-visible bg-transparent p-0 outline-none backdrop:bg-black/90"
 >
 	<div class="modal-container">
 		<div
@@ -83,13 +83,15 @@
 		</div>
 		<button
 			bind:this={closeButton}
-			class="close-button select-none rounded-full bg-gray-900 font-black text-brand-lighter outline-none hover:text-brand-primary"
+			class="close-button select-none rounded-full bg-gray-900 font-black text-brand-lighter outline-hidden hover:text-brand-primary"
 			onclick={close}
 		>X</button>
 	</div>
 </dialog>
 
-<style lang="postcss">
+<style>
+	@import '../../../css/style.css' reference;
+
 	dialog {
 		--closeButtonSize: 2rem;
 		--closeButtonGap: 1rem;
@@ -98,7 +100,7 @@
 		--closeButtonAddedHeight: var(--closeButtonTotalSize);
 		--dialogMargin: 2.5rem;
 
-		@media screen(sm) {
+		@media (width >= theme(--breakpoint-sm)) {
 			/* doubled, because we add left margin to keep the image centered */
 			--closeButtonAddedWidth: calc(var(--closeButtonTotalSize) * 2);
 			--closeButtonAddedHeight: 0rem;
@@ -116,7 +118,7 @@
 		align-items: end;
 		gap: var(--closeButtonGap);
 
-		@media screen(sm) {
+		@media (width >= theme(--breakpoint-sm)) {
 			flex-direction: row;
 			align-items: start;
 			margin-left: var(--closeButtonTotalSize);

resources/js/Components/Pagination/DesktopPagination.svelte

@@ -6,7 +6,7 @@
 	let { meta }: { meta: PaginationMeta } = $props();
 </script>
 
-<span class="inline-flex relative z-0 shadow-sm">
+<span class="inline-flex relative z-0 shadow-xs">
 	{#each meta.links as element}
 		{#if element.label === 'pagination.previous'}
 			{#if meta.current_page === 1}

resources/js/Components/Pagination/PaginationLink.svelte

@@ -33,7 +33,7 @@
 			relative inline-flex items-center py-2 cursor-pointer
 			text-gray-800 bg-white dark:text-gray-200 dark:bg-gray-900 shadow-md
 			hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-800
-			focus:outline-none focus:ring
+			focus:outline-none focus:ring-3
 			transition ease-in-out duration-150
 		"
 	>

resources/js/Components/Title.svelte

@@ -35,14 +35,16 @@
 	<h2 class="text-2xl font-medium">{@render link()}</h2>
 {/if}
 
-<style lang="postcss">
+<style>
+	@import '../../css/style.css' reference;
+
 	.title {
 		position: relative;
-		@apply after:bg-brand-primary after:dark:bg-brand-primary-dark;
+		@apply after:bg-brand-primary dark:after:bg-brand-primary-dark;
 	}
 
 	.sub {
-		@apply after:bg-brand-lighter after:dark:bg-brand-lighter-dark;
+		@apply after:bg-brand-lighter dark:after:bg-brand-lighter-dark;
 	}
 
 	.title::after {

resources/js/Layouts/MainMenuButton.svelte

@@ -11,7 +11,7 @@
 	class="
 		px-5 py-2.5 bg-white dark:bg-gray-700 shadow-lg rounded-full
 		text-gray-900 dark:text-white transition-colors-shadow duration-200 uppercase font-semibold tracking-wide
-		focus:outline-none hover:ring focus:ring active:ring hover:ring-brand-primary/50 focus:ring-brand-primary/75 active:ring-brand-primary/100
+		focus:outline-none hover:ring-3 focus:ring-3 active:ring-3 hover:ring-brand-primary/50 focus:ring-brand-primary/75 active:ring-brand-primary/100
 	"
 >
 	{@render children()}