Create a Modal in Svelte With Tailwind CS

In this section we will create modal in svelte with tailwind css. We will see svelte with typescript modal, modal can be closed by clicking outside svelte with Tailwind CSS.

Install Tailwind CSS in Svelte with Typescript Using Vite

Tool Use

Tailwind CSS 3.x

Svelte

Heroicons icon

Examples

svelte with tailwind css simple modal.

<script>
  let isOpen = false;

  function closeModal() {
    isOpen = false;
  }
</script>

<div>
  <div class="flex items-center justify-center h-screen">
    <button
      class="px-4 py-2 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700"
      on:click={() => (isOpen = true)}
    >
      Open Modal
    </button>
  </div>

  <div
    class={`fixed inset-0 z-50 overflow-auto bg-opacity-50 bg-black flex items-center justify-center ${
      isOpen ? "" : "hidden"
    }`}
  >
    <div class="w-3/4 p-6 bg-white rounded shadow-lg md:w-1/2 lg:w-1/3">
      <header class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-semibold">Modal Title</h2>
        <button class="text-gray-700" on:click={closeModal}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </header>
      <div>
        <p class="text-gray-700">Modal content...</p>
      </div>
    </div>
  </div>
</div>

svelte with tailwind modal

svelte with tailwind css modal using typescript.

<script lang="ts">
  let isOpen: boolean = false;

  function closeModal(): void {
    isOpen = false;
  }
</script>

<div>
  <div class="flex items-center justify-center h-screen">
    <button
      class="px-4 py-2 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700"
      on:click={() => (isOpen = true)}
    >
      Open Modal
    </button>
  </div>

  <div
    class={`fixed inset-0 z-50 overflow-auto bg-opacity-50 bg-black flex items-center justify-center ${
      isOpen ? "" : "hidden"
    }`}
  >
    <div class="w-3/4 p-6 bg-white rounded shadow-lg md:w-1/2 lg:w-1/3">
      <header class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-semibold">Modal Title</h2>
        <button class="text-gray-700" on:click={closeModal}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </header>
      <div>
        <p class="text-gray-700">Modal content...</p>
      </div>
    </div>
  </div>
</div>

svelte with tailwind modal typescript

svelte with tailwind css modal closed by clicking outside.

<script>
  let isOpen = false;

  function closeModal() {
    isOpen = false;
  }

  function handleOutsideClick(event) {
    if (event.target === event.currentTarget) {
      closeModal();
    }
  }
</script>

<div class="flex items-center justify-center h-screen">
  <button
    class="px-4 py-2 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700"
    on:click={() => (isOpen = true)}
  >
    Open Modal
  </button>
</div>
<div>
  {#if isOpen}
    <div
      class="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
      on:click={handleOutsideClick}
    >
      <div class="w-3/4 p-6 bg-white rounded shadow-lg md:w-1/2 lg:w-1/3">
        <header class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">Click Outside of Modal</h2>
          <button class="text-gray-700" on:click={closeModal}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </header>
        <div>
          <p class="text-gray-700">Modal content ...</p>
        </div>
      </div>
    </div>
  {/if}
</div>

svelte with tailwind css modal closed by clicking outside