more formatting

src/components/Header.svelte

@@ -1,33 +1,33 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from "$app/stores";
 
-	import TailwindVersionHelp from '$/components/TailwindVersionHelp.svelte';
-	export let tailwindVersion = ''; // Can be v3.3+, v3.2 or v2
+	import TailwindVersionHelp from "$/components/TailwindVersionHelp.svelte";
+	export let tailwindVersion = ""; // Can be v3.3+, v3.2 or v2
 
 	let dialog;
 </script>
 
 <header class="p-4 mt-1 -ml-4 -mr-4 bg-cyan-800 sm:rounded">
 	<h1 class="leading-none text-cyan-50">
-		Find the nearest Tailwind {tailwindVersion !== 'v3.3+' ? tailwindVersion : ''} colour
+		Find the nearest Tailwind {tailwindVersion !== "v3.3+" ? tailwindVersion : ""} colour
 	</h1>
 
 	<TailwindVersionHelp bind:dialog />
 
 	<p class="mt-2 text-cyan-100">
 		A tool to find the nearest colour from
-		{#if tailwindVersion === 'v3.3+'}
+		{#if tailwindVersion === "v3.3+"}
 			<a href="https://tailwindcss.com/docs/customizing-colors"> the Tailwind colour palette</a>
 		{/if}
 
-		{#if tailwindVersion === 'v3.2'}
+		{#if tailwindVersion === "v3.2"}
 			<a
 				href="https://web.archive.org/web/20230318012140/https://tailwindcss.com/docs/customizing-colors"
 			>
 				the <strong>Tailwind v3.0-3.2</strong> colour palette</a
 			>
 		{/if}
-		{#if tailwindVersion === 'v2'}
+		{#if tailwindVersion === "v2"}
 			<a href="https://v2.tailwindcss.com/docs/customizing-colors">
 				the <strong>Tailwind {tailwindVersion}</strong> colour palette</a
 			>
@@ -36,23 +36,23 @@
 	<div class="flex flex-col sm:flex-row mt-2 gap-y-2 gap-x-4" />
 	<div class="mt-4 text-cyan-100">
 		<details class="select-none">
-			<summary class="cursor-pointer ">Switch Tailwind version</summary>
+			<summary class="cursor-pointer">Switch Tailwind version</summary>
 			<div class="flex flex-col sm:flex-row mt-2 gap-y-2 gap-x-4 sm:items-center justify-start">
 				<a
 					href="/"
-					class:active={$page.url.pathname === '/'}
+					class:active={$page.url.pathname === "/"}
 					class="no-underline hover:underline w-fit px-2">Tailwind v3.3+</a
 				>
 
 				<a
 					href="/3-2"
-					class:active={$page.url.pathname === '/3-2'}
+					class:active={$page.url.pathname === "/3-2"}
 					class="no-underline hover:underline w-fit px-2">Tailwind v3.0-3.2</a
 				>
 
 				<a
 					href="/2"
-					class:active={$page.url.pathname === '/2'}
+					class:active={$page.url.pathname === "/2"}
 					class="no-underline hover:underline w-fit px-2">Tailwind v2</a
 				>
 

src/components/tailwindColourNameResultBox.svelte

@@ -10,7 +10,7 @@
 		try {
 			await navigator.clipboard.writeText(resultText);
 		} catch (err) {
-			console.error('Failed to copy!', err);
+			console.error("Failed to copy!", err);
 		}
 	};
 </script>
@@ -20,7 +20,7 @@
 	title="Click to copy"
 	on:click={copyColourNameToClipboard}
 >
-	<span class="font-semibold leading-loose underline ">
+	<span class="font-semibold leading-loose underline">
 		{resultText}
 	</span>
 	<svg

src/components/tailwindResult.svelte

@@ -1,25 +1,25 @@
 <script>
 	export let tailwindVersion; // Can be v3.3+, v3.2 or v2
-	import { isValidColour } from '$/scripts/isValidColour';
-	import { tailwindColours as v3_3_colours } from '$/colourSets/v3-3_colours';
-	import { tailwindColours as v3_2_colours } from '$/colourSets/v3-2_colours';
-	import { tailwindColours as v2_colours } from '$/colourSets/v2_colours';
+	import { isValidColour } from "$/scripts/isValidColour";
+	import { tailwindColours as v3_3_colours } from "$/colourSets/v3-3_colours";
+	import { tailwindColours as v3_2_colours } from "$/colourSets/v3-2_colours";
+	import { tailwindColours as v2_colours } from "$/colourSets/v2_colours";
 
-	import * as nearestColour from 'nearest-color';
+	import * as nearestColour from "nearest-color";
 
 	let tailwindColours = {};
 
-	if (tailwindVersion === 'v3.3+') {
+	if (tailwindVersion === "v3.3+") {
 		tailwindColours = v3_3_colours;
-	} else if (tailwindVersion === 'v3.2') {
+	} else if (tailwindVersion === "v3.2") {
 		tailwindColours = v3_2_colours;
-	} else if (tailwindVersion === 'v2') {
+	} else if (tailwindVersion === "v2") {
 		tailwindColours = v2_colours;
 	}
 
 	const getNearestTailwindColour = nearestColour.from(tailwindColours);
 
-	import { colour as userColour } from '$/scripts/colourStore';
+	import { colour as userColour } from "$/scripts/colourStore";
 
 	let nearestTailwindColour = null; // Object from nearest-color
 
@@ -28,25 +28,27 @@
 
 	$: if ($userColour != null && isValidColour($userColour)) {
 		nearestTailwindColour = getNearestTailwindColour($userColour);
-		tailwindColourVariant = nearestTailwindColour['name'];
-		tailwindColourValue = nearestTailwindColour['value'];
+		tailwindColourVariant = nearestTailwindColour["name"];
+		tailwindColourValue = nearestTailwindColour["value"];
 	}
 
-	import ColourBlock from '$/components/colourBlock.svelte';
-	import ColourNameResultBox from '$/components/tailwindColourNameResultBox.svelte';
+	import ColourBlock from "$/components/colourBlock.svelte";
+	import ColourNameResultBox from "$/components/tailwindColourNameResultBox.svelte";
 </script>
 
 <div class="flex flex-col gap-y-6">
 	<div>
 		<p class="font-semibold">
-			Nearest Tailwind Colour {tailwindVersion !== 'v3.3+' ? ` in ${tailwindVersion}` : ''}
+			Nearest Tailwind Colour {tailwindVersion !== "v3.3+" ? ` in ${tailwindVersion}` : ""}
 		</p>
 
 		<p class="mt-0 text-gray-700">
-			Here's the nearest colour to
+			Here"s the nearest colour to
 			<code>{$userColour.toUpperCase()}</code>
-			in {tailwindVersion !== 'v3.3+' ? `Tailwind ${tailwindVersion}` : 'Tailwind'}'s full colour
-			palette.
+			in {tailwindVersion !== "v3.3+"
+				? `Tailwind ${tailwindVersion}`
+				: `Tailwind's full colour
+			palette.`}
 		</p>
 
 		<p class="text-gray-700">Tailwind colour name:</p>
@@ -63,7 +65,7 @@
 		<div class="flex flex-col sm:flex-row mt-2 gap-x-6 gap-y-4">
 			<div>
 				<p class="text-gray-700 mt-0">
-					Tailwind's <span class="italic">{tailwindColourVariant}</span>
+					Tailwind"s <span class="italic">{tailwindColourVariant}</span>
 				</p>
 				<div class="w-48 h-20">
 					<ColourBlock backgroundColourHexCode={tailwindColourValue} />

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import '$/app.css';
+	import "$/app.css";
 </script>
 
 <div class="container grid h-screen px-4 mx-auto max-w-prose grid-cols-1 grid-rows-[auto_1fr_auto]">

src/routes/+page.svelte

@@ -1,13 +1,13 @@
 <script>
-	/** @type {import('./$types').PageData} */
+	/** @type {import("./$types").PageData} */
 
-	import { isValidColour } from '$/scripts/isValidColour';
-	import Header from '$/components/Header.svelte';
-	import ColourInput from '$/components/colourInput.svelte';
-	import TailwindResult from '$/components/tailwindResult.svelte';
+	import { isValidColour } from "$/scripts/isValidColour";
+	import Header from "$/components/Header.svelte";
+	import ColourInput from "$/components/colourInput.svelte";
+	import TailwindResult from "$/components/tailwindResult.svelte";
 
-	import { colour as userColour } from '$/scripts/colourStore';
-	const tailwindVersion = 'v3.3+';
+	import { colour as userColour } from "$/scripts/colourStore";
+	const tailwindVersion = "v3.3+";
 </script>
 
 <svelte:head>

src/routes/2/+page.svelte

@@ -1,14 +1,14 @@
 <script>
-	/** @type {import('./$types').PageData} */
+	/** @type {import("./$types").PageData} */
 
-	import { isValidColour } from '$/scripts/isValidColour';
-	import Header from '$/components/Header.svelte';
+	import { isValidColour } from "$/scripts/isValidColour";
+	import Header from "$/components/Header.svelte";
 
-	import ColourInput from '$/components/colourInput.svelte';
-	import TailwindResult from '$/components/tailwindResult.svelte';
+	import ColourInput from "$/components/colourInput.svelte";
+	import TailwindResult from "$/components/tailwindResult.svelte";
 
-	import { colour as userColour } from '$/scripts/colourStore';
-	const tailwindVersion = 'v2';
+	import { colour as userColour } from "$/scripts/colourStore";
+	const tailwindVersion = "v2";
 </script>
 
 <svelte:head>

src/routes/3-2/+page.svelte

@@ -1,14 +1,14 @@
 <script>
-	/** @type {import('./$types').PageData} */
+	/** @type {import("./$types").PageData} */
 
-	import { isValidColour } from '$/scripts/isValidColour';
-	import Header from '$/components/Header.svelte';
+	import { isValidColour } from "$/scripts/isValidColour";
+	import Header from "$/components/Header.svelte";
 
-	import ColourInput from '$/components/colourInput.svelte';
-	import TailwindResult from '$/components/tailwindResult.svelte';
+	import ColourInput from "$/components/colourInput.svelte";
+	import TailwindResult from "$/components/tailwindResult.svelte";
 
-	import { colour as userColour } from '$/scripts/colourStore';
-	const tailwindVersion = 'v3.2';
+	import { colour as userColour } from "$/scripts/colourStore";
+	const tailwindVersion = "v3.2";
 </script>
 
 <svelte:head>

svelte.config.js

@@ -1,7 +1,7 @@
 import adapter from "@sveltejs/adapter-auto";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import("@sveltejs/kit").Config} */
 const config = {
 	kit: {
 		adapter: adapter(),

vite.config.js

@@ -1,6 +1,6 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 
-/** @type {import('vite').UserConfig} */
+/** @type {import("vite").UserConfig} */
 const config = {
 	plugins: [sveltekit()]
 };