tailwind prettier

.prettierrc

@@ -8,7 +8,7 @@
 			"files": "*.svelte",
 			"options": {
 				"parser": "svelte",
-				"plugins": ["prettier-plugin-svelte"]
+				"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
 			}
 		},
 		{

package.json

@@ -19,8 +19,9 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
 		"postcss": "^8.4.49",
-		"prettier": "^3.3.2",
+		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.2.4",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"shiki": "^1.24.0",
 		"svelte": "^5.4.0",
 		"sveltejs-tippy": "^3.0.0",

src/App.svelte

@@ -271,7 +271,7 @@
 		<Notification close={() => (showErrorNotification = false)} />
 	{/if}
 
-	<main class="py-6 px-4 space-y-6 flex-1">
+	<main class="flex-1 space-y-6 px-4 py-6">
 		<AuthorizationRequest
 			bind:selectedScopes
 			bind:selectedProtocolParams

src/lib/components/AuthorizationRequest.svelte

@@ -23,21 +23,21 @@
 </script>
 
 <section
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6"
+	class="relative w-full rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
 >
 	<span
-		class="absolute -mt-8 bg-white dark:bg-gray-1000 px-2 -mx-2 text-charcoal/70 dark:text-gray/70 uppercase text-xs font-mono"
+		class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
 		>Authorization Request</span
 	>
 	{#if localStorage.plausible_ignore}
 		<HelloModeToggle bind:isHelloMode />
 	{/if}
 	<button
 		onclick={reset}
-		class="absolute -top-3 right-2 px-3 py-0.5 rounded-md border border-charcoal dark:border-gray-800 text-xs bg-white dark:bg-gray-1000"
+		class="absolute -top-3 right-2 rounded-md border border-charcoal bg-white px-3 py-0.5 text-xs dark:border-gray-800 dark:bg-gray-1000"
 		>Reset</button
 	>
-	<div class="columns-1 md:columns-2 2xl:columns-3 4xl:columns-4 gap-x-12 space-y-6">
+	<div class="columns-1 gap-x-12 space-y-6 md:columns-2 2xl:columns-3 4xl:columns-4">
 		<ScopeParam
 			bind:selectedScopes
 			bind:customScope

src/lib/components/AuthorizationResponse.svelte

@@ -8,10 +8,10 @@
 
 <section
 	id="authz-response-container"
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6 scroll-mt-5"
+	class="relative w-full scroll-mt-5 rounded-sm border border-charcoal px-4 pb-4 pt-6 dark:border-gray-800"
 >
 	<span
-		class="absolute -mt-8 bg-white dark:bg-gray-1000 px-2 -mx-2 text-charcoal/70 dark:text-gray/70 uppercase text-xs font-mono"
+		class="absolute -mx-2 -mt-8 bg-white px-2 font-mono text-xs uppercase text-charcoal/70 dark:bg-gray-1000 dark:text-gray/70"
 		>Authorization Response</span
 	>
 
@@ -42,6 +42,6 @@
 			{/if}
 		</div>
 	{:else}
-		<p class="text-sm text-center my-4 opacity-70">Nothing to see here yet</p>
+		<p class="my-4 text-center text-sm opacity-70">Nothing to see here yet</p>
 	{/if}
 </section>

src/lib/components/ChevronY.svelte

@@ -8,7 +8,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="3"
 	stroke="currentColor"
-	class="w-4 h-4 mt-0.5"
+	class="mt-0.5 h-4 w-4"
 	class:rotate-180={dir === 'up'}
 >
 	<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />

src/lib/components/CopyButton.svelte

@@ -15,7 +15,7 @@
 <button
 	onclick={copy}
 	use:tippy={{ content: 'Copy', placement: 'right' }}
-	class="w-6 h-6 flex items-center justify-center {css} rounded-md bg-white dark:bg-charcoal"
+	class="flex h-6 w-6 items-center justify-center {css} rounded-md bg-white dark:bg-charcoal"
 >
 	{#if copied}
 		<svg

src/lib/components/Header.svelte

@@ -19,10 +19,10 @@
 </script>
 
 <header
-	class="text-white dark:text-gray flex-shrink-0 bg-charcoal h-12 flex items-center justify-between px-4 font-medium text-lg"
+	class="flex h-12 flex-shrink-0 items-center justify-between bg-charcoal px-4 text-lg font-medium text-white dark:text-gray"
 >
-	<div class="w-1/3 inline-flex items-center">
-		<button onclick={() => (mobileMenu = !mobileMenu)} class="md:hidden mr-2 group">
+	<div class="inline-flex w-1/3 items-center">
+		<button onclick={() => (mobileMenu = !mobileMenu)} class="group mr-2 md:hidden">
 			{#if mobileMenu}
 				<CloseIcon />
 			{:else}
@@ -32,19 +32,19 @@
 		<a
 			href="https://hello.dev"
 			target="_blank"
-			class="hidden md:inline-flex items-center relative nav-link font-normal hover:underline"
+			class="nav-link relative hidden items-center font-normal hover:underline md:inline-flex"
 		>
 			<span>hello.dev</span>
 			<ExternalLinkIcon />
 		</a>
 	</div>
-	<span class="md:w-1/3 flex justify-center flex-shrink-0">
+	<span class="flex flex-shrink-0 justify-center md:w-1/3">
 		<img src="logo.svg" alt="Hellō Playground" />
 	</span>
-	<div class="w-1/3 flex justify-end space-x-4">
-		<ul class="hidden md:flex space-x-4">
+	<div class="flex w-1/3 justify-end space-x-4">
+		<ul class="hidden space-x-4 md:flex">
 			{#each navLinks as { text, link }}
-				<li class="nav-link text-sm font-normal relative">
+				<li class="nav-link relative text-sm font-normal">
 					<a href={link} target="_blank" class="inline-flex items-center hover:underline">
 						{text}
 						<ExternalLinkIcon />
@@ -56,7 +56,7 @@
 
 	{#if mobileMenu}
 		<div
-			class="bg-charcoal md:hidden absolute left-0 top-12 w-full px-4 z-50 min-w-[320px]"
+			class="absolute left-0 top-12 z-50 w-full min-w-[320px] bg-charcoal px-4 md:hidden"
 			transition:slide={{ duration: 150 }}
 		>
 			<ul class="flex flex-col gap-y-3 pb-4 text-base">
@@ -95,7 +95,7 @@
 					mobileMenu = false;
 				}
 			}}
-			class="md:hidden fixed top-12 left-0 z-40 bg-black bg-opacity-60 w-full h-full"
+			class="fixed left-0 top-12 z-40 h-full w-full bg-black bg-opacity-60 md:hidden"
 		></div>
 	{/if}
 </header>

src/lib/components/Icons/ExternalLinkIcon.svelte

@@ -1,6 +1,6 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	class="h-4 ml-1"
+	class="ml-1 h-4"
 	fill="none"
 	viewBox="0 0 24 24"
 	stroke="currentColor"

src/lib/components/Inputs/DomainHintInput.svelte

@@ -8,13 +8,13 @@
 
 <input
 	type="text"
-	class="border w-full form-input h-6 px-2"
+	class="form-input h-6 w-full border px-2"
 	class:opacity-50={!selected}
 	bind:value
 />
 
 {#if invalidSlugs?.length}
-	<p class="text-red-500 text-xs mt-2" transition:slide={{ duration: 150 }}>
+	<p class="mt-2 text-xs text-red-500" transition:slide={{ duration: 150 }}>
 		{invalidSlugs}
 		{invalidSlugs.length > 1 ? 'are unsupported values' : 'is an unsupported value'}
 	</p>

src/lib/components/Inputs/ProviderHintInput.svelte

@@ -29,15 +29,15 @@
 
 <input
 	type="text"
-	class="border w-full form-input h-6 px-2"
+	class="form-input h-6 w-full border px-2"
 	class:opacity-50={!selected}
 	oninput={validate}
 	placeholder={PROVIDER_HINT?.PLACEHOLDER}
 	bind:value
 />
 
 {#if invalidSlugs?.length}
-	<p class="text-red-500 text-xs mt-2" transition:slide={{ duration: 150 }}>
+	<p class="mt-2 text-xs text-red-500" transition:slide={{ duration: 150 }}>
 		{invalidSlugs}
 		{invalidSlugs.length > 1 ? 'are unsupported values' : 'is an unsupported value'}
 	</p>

src/lib/components/Notification.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="bg-red-500 px-2.5 h-11 md:h-9 text-center text-white flex items-center justify-center"
+	class="flex h-11 items-center justify-center bg-red-500 px-2.5 text-center text-white md:h-9"
 	out:slide
 >
 	<span class="text-sm"
@@ -19,7 +19,7 @@
 			viewBox="0 0 24 24"
 			stroke-width="2"
 			stroke="currentColor"
-			class="w-5 h-5"
+			class="h-5 w-5"
 		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 		</svg>

src/lib/components/Request/AuthorizationServer.svelte

@@ -18,7 +18,7 @@
 		class="inline-flex items-center space-x-2"
 		onclick={() => (dropdowns.server = !dropdowns.server)}
 	>
-		<span class="font-medium text-base"> Authorization Server </span>
+		<span class="text-base font-medium"> Authorization Server </span>
 		<ChevronY dir={dropdowns.server ? 'up' : 'down'} />
 	</button>
 	{#if dropdowns.server}
@@ -27,7 +27,7 @@
 			...AUTHZ_SERVERS.SERVERS,
 			...(showHelloExtended ? AUTHZ_SERVERS.HELLO_EXTEND_SERVERS : [])
 		]}
-		<ul class="space-y-2 mt-2" transition:slide|local={{ duration: 150 }}>
+		<ul class="mt-2 space-y-2" transition:slide|local={{ duration: 150 }}>
 			{#each ALL_AUTHZ_SERVERS as server}
 				<li class="flex items-center">
 					<input
@@ -43,7 +43,7 @@
 					{:then validateOk}
 						<label
 							for={server}
-							class="ml-2 break-all w-full md:w-auto truncate"
+							class="ml-2 w-full truncate break-all md:w-auto"
 							class:text-red-500={!validateOk}>{server}</label
 						>
 						<CopyButton content={server} css="opacity-70 ml-1" />
@@ -63,7 +63,7 @@
 					form="custom-authz-server"
 					type="url"
 					name="authz-server"
-					class="h-6 ml-2 w-full text-charcoal form-input"
+					class="form-input ml-2 h-6 w-full text-charcoal"
 					placeholder="https://domain.example/"
 					oninput={() => (selectedAuthzServer = 'custom-authz-server')}
 					bind:value={customAuthzServer}

src/lib/components/Request/HelloModeToggle.svelte

@@ -2,7 +2,7 @@
 	let { isHelloMode = $bindable() } = $props();
 </script>
 
-<div class="flex items-center absolute absolute top-4 md:-top-3 right-2 md:right-18">
+<div class="absolute absolute right-2 top-4 flex items-center md:-top-3 md:right-18">
 	<div>
 		<input
 			id="mode-hello"
@@ -27,6 +27,6 @@
 
 <style>
 	label {
-		@apply cursor-pointer select-none px-3 h-[22px] w-14 block flex border-y items-center justify-center border-charcoal dark:border-gray-800 text-xs bg-white dark:bg-gray-1000 peer-checked:bg-charcoal peer-checked:text-white;
+		@apply block flex h-[22px] w-14 cursor-pointer select-none items-center justify-center border-y border-charcoal bg-white px-3 text-xs peer-checked:bg-charcoal peer-checked:text-white dark:border-gray-800 dark:bg-gray-1000;
 	}
 </style>