Create a Toggle Switch in Svelte With Tailwind CSS

In this section we will create toggle switch in svelte with tailwind css. We will see svelte toggle switch on off, toggle switch using checkbox example svelte with Tailwind CSS.

Install Tailwind CSS in Svelte with Typescript Using Vite

Tool Use

Tailwind CSS 3.x

Svelte

Examples

svelte with tailwind css simple toggle switch.

<script>
  let toggled = false;

  function toggle() {
    toggled = !toggled;
  }
</script>

<div
  class="relative inline-flex items-center w-12 h-6 transition-colors duration-200 ease-linear bg-gray-300 rounded-full cursor-pointer"
  on:click={toggle}
>
  <span
    class="absolute w-4 h-4 transition-transform duration-200 ease-linear bg-white rounded-full left-1 top-1"
    class:translate-x-6={toggled}
  />
</div>

svelte with tailwind css toggle switch

svelte with tailwind css on off toggle switch.

<script>
  let toggled = false;

  function toggle() {
      toggled = !toggled;
  }
</script>

<div class="flex items-center cursor-pointer">
  <span class="text-gray-600">{toggled ? 'On' : 'Off'}</span>
  <div class="relative inline-flex items-center w-16 h-8 ml-2 transition-colors duration-200 ease-linear bg-gray-300 rounded-full" on:click={toggle}>
      <span class="absolute w-6 h-6 transition-transform duration-200 ease-linear bg-white rounded-full shadow left-1 top-1" class:translate-x-8={toggled}></span>
  </div>
</div>

svelte with tailwind css on off toggle switch

svelte with tailwind css green and red toggle switch.

<script>
  let toggled = false;

  function toggle() {
      toggled = !toggled;
  }
</script>

<div class="flex items-center cursor-pointer">
  <span class:text-green-500={toggled} class:text-red-500={!toggled}>{toggled ? 'On' : 'Off'}</span>
  <div class="relative inline-flex items-center w-16 h-8 ml-2 transition-colors duration-200 ease-linear rounded-full" class:bg-green-500={toggled} class:bg-red-500={!toggled} on:click={toggle}>
      <span class="absolute w-6 h-6 transition-transform duration-200 ease-linear bg-white rounded-full shadow left-1 top-1" class:translate-x-8={toggled}></span>
  </div>
</div>

svelte with tailwind css toggle switch successful

svelte with tailwind css toggle switch using checkbox.

<script>
  let isChecked = false;
</script>

<label class="flex items-center cursor-pointer">
  <span class="mr-3" class:text-green-500={isChecked} class:text-red-500={!isChecked}>
    {isChecked ? 'On' : 'Off'}
  </span>
  <div class="relative">
    <input type="checkbox" class="sr-only" bind:checked={isChecked} />
    <div class="block h-8 transition-colors duration-300 ease-in-out rounded-full w-14" class:bg-green-500={isChecked} class:bg-red-500={!isChecked}></div>
    <div class="absolute w-6 h-6 transition-transform duration-300 ease-in-out bg-white rounded-full dot left-1 top-1" class:translate-x-6={isChecked}></div>
  </div>
</label>

<style>
  .dot {
    transform: translateX(0);
  }
  .translate-x-6 {
    transform: translateX(24px);
  }
</style>