Sveltekit with Tailwind CSS 404 Error Page Example

In this section we will create custom 404 not found error page tailwind css with Sveltekit. We will see sveltekit 404 error page, 404 error page with image example with Tailwind CSS & Sveltekit.

Install Tailwind CSS in Sveltekit + Vite + Typescript

To use custom design 404 page you need to create src/routes/+error.svelte file

src/routes/+error.svelte

Example 1

Tailwind CSS with sveltekit  simple responsive 404 error page.

<script>
  import { page } from "$app/stores";
</script>

<div class="flex justify-center items-center h-screen bg-blue-600">
  <h1 class="text-3xl font-bold text-white lg:text-6xl">
    {$page.error.message}
  </h1>
</div>

Example 2

Sveltekit with tailwind 404 error page with message and home button.

<script>
  import { page } from "$app/stores";
</script>
<div class="flex items-center justify-center h-screen">
  <div class="bg-white">
    <div class="flex flex-col items-center">
      <h1 class="font-bold text-3xl text-blue-600 lg:text-6xl">404</h1>

      <h6 class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
        <span class="text-red-500">Oops!</span> Page {$page.error.message}
      </h6>

      <p class="mb-8 text-center text-gray-500 md:text-lg">
        The page you’re looking for doesn’t exist.
      </p>

      <a
        href="/"
        class="px-6 py-2 text-sm font-semibold text-blue-200 bg-blue-600"
        >Go home</a
      >
    </div>
  </div>
</div>

sveltekit with tailwind 404 error page

Example 3

Sveltekit with tailwind 404 error page with image.

<script>
  import { page } from "$app/stores";
</script>

<div class="flex items-center justify-center w-screen h-screen">
  <div class="px-4 lg:py-12">
      <div class="lg:gap-4 lg:flex">
          <div class="flex flex-col items-center justify-center md:py-24 lg:py-32">
              <h1 class="font-bold text-blue-600 text-9xl">404</h1>
              <p class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
                  <span class="text-red-500">Oops!</span> Page {$page.error.message}
              </p>
              <p class="mb-8 text-center text-gray-500 md:text-lg">
                  The page you’re looking for doesn’t exist.
              </p>
              <a href="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">Go home</a>
          </div>
          <div class="mt-4">
              <img src="https://cdn.pixabay.com/photo/2016/11/22/23/13/black-dog-1851106__340.jpg" alt="img"
                  class="object-cover w-full h-full" />
          </div>
      </div>
  </div>
</div>

sveltekit tailwind 404 error page with image