Make some changes to on:change

src/routes/radio-group/radio-group.svelte

@@ -25,7 +25,7 @@
 
 <div class="p-12 max-w-xl">
   <a href="/">Link before</a>
-  <RadioGroup value={active} on:change={(event) => (active = event.detail)}>
+  <RadioGroup bind:value={active}>
     <fieldset class="space-y-4">
       <legend>
         <h2 class="text-xl">Privacy setting</h2>

src/routes/switch/switch-with-pure-tailwind.svelte

@@ -14,8 +14,7 @@
 
     <Switch
       as="button"
-      checked={state}
+      bind:checked={state}
-      on:change={(event) => (state = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",

src/routes/tabs/tabs-with-pure-tailwind.svelte

@@ -32,8 +32,7 @@
 
     <Switch
       as="button"
-      checked={manual}
+      bind:checked={manual}
-      on:change={(event) => (manual = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",