Manual keyboard activation 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", checked ? "bg-indigo-600" : "bg-gray-200" )} let:checked > {#each tabs as tab, tabIdx (tab.name)} classNames( selected ? "text-gray-900" : "text-gray-500 hover:text-gray-700", tabIdx === 0 ? "rounded-l-lg" : "", tabIdx === tabs.length - 1 ? "rounded-r-lg" : "", tab.disabled && "opacity-50", "group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10" )} let:selected > {tab.name} {#if tab.disabled} (disabled) {/if} {/each} {#each tabs as tab (tab.name)} {tab.content} {/each}