Ramon Blog - Integrating intl-tel-input with Tailwind CSS and Svelte: A Step-by-Step Guide

In this tutorial, we will walk through the process of seamlessly integrating the intl-tel-input library with Tailwind CSS in a Svelte application. This guide will help you enhance the user experience of international telephone input fields while maintaining a clean and responsive design.

Prerequisites

Before we begin, make sure you have the necessary dependencies installed:

npm install intl-tel-input

npm install -D @types/intl-tel-input

Setting Up the Svelte Component

<script lang="ts">
  import { onDestroy, onMount } from "svelte";
  import intlTelInput from "intl-tel-input";
  import "intl-tel-input/build/css/intlTelInput.css";

  export let value: string = "";

  let iti: intlTelInput.Plugin;
  let input: HTMLInputElement;
  let formattedValue: string;

  $: if (formattedValue) {
    value = iti.getNumber();
  }

  onMount(async () => {
    // @ts-ignore
    await import("intl-tel-input/build/js/utils");
    iti = intlTelInput(input);
  });

  onDestroy(() => iti && iti.destroy());
</script>

<input
  type="tel"
  class="w-full px-4 py-3 text-gray-700 bg-white border rounded-md focus:outline-none focus:ring focus:ring-opacity-40 dark:bg-gray-900 dark:text-gray-300"
  bind:this={input}
  bind:value={formattedValue}
/>

<style>
  :global(html.dark .iti__country-list) {
    background-color: #111827 !important;
  }
</style>

See the result below to try out the international telephone input directly on this page: