diff --git a/apps/website/src/routes/docs/headless/switch/snippets/switch.css b/apps/website/src/routes/docs/headless/switch/snippets/switch.css
index ca7a708ff..683e4ec7a 100644
--- a/apps/website/src/routes/docs/headless/switch/snippets/switch.css
+++ b/apps/website/src/routes/docs/headless/switch/snippets/switch.css
@@ -1,8 +1,5 @@
 /* Define default light theme colors */
 .switch {
-  --thumb-color: hsla(var(--background));
-  --track-color-inactive: hsla(var(--switch-track-color-inactive));
-  --track-color-active: hsla(var(--primary));
   flex-direction: row-reverse;
   display: flex;
   align-items: center;
@@ -11,12 +8,11 @@
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-
   & > input {
     --thumb-position: 0%;
     --thumb-transition-duration: 0.25s;
     padding: 4px;
-    background: var(--track-color-inactive);
+    background: hsla(var(--switch-track-color-inactive));
     inline-size: 4rem;
     block-size: 2rem;
     border-radius: 4rem;
@@ -38,7 +34,7 @@
       pointer-events: auto;
       inline-size: 2rem;
       block-size: 2rem;
-      background: var(--thumb-color);
+      background: hsla(var(--background));
       box-shadow: 0 0 0 0 hsla(var(--switch-thumb-color-highlight));
       border-radius: 50%;
       transform: translateX(0%);
@@ -49,7 +45,7 @@
     }
 
     &:checked {
-      background: var(--track-color-active);
+      background: hsla(var(--primary));
       &::before {
         transform: translateX(100%);
       }
diff --git a/apps/website/tailwind.config.cjs b/apps/website/tailwind.config.cjs
index 7c308925c..1a1d5ec60 100644
--- a/apps/website/tailwind.config.cjs
+++ b/apps/website/tailwind.config.cjs
@@ -49,6 +49,8 @@ module.exports = {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        switchInactive: 'hsl(var(--switch-track-color-inactive))',
+        switchThumb: 'hsl(var(--switch-thumb-color-highlight))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
diff --git a/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap b/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap
index 299efe824..01fa9bb57 100644
--- a/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap
+++ b/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Setup Tailwind generator 
+exports[`Setup Tailwind generator
     GIVEN no options are passed
     THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radius 0 1`] = `
 "@tailwind components;
@@ -89,7 +89,7 @@ html {
 "
 `;
 
-exports[`Setup Tailwind generator 
+exports[`Setup Tailwind generator
     GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1
     THEN it should generate the correct theme 1`] = `
 "@tailwind components;
@@ -172,7 +172,7 @@ html {
 "
 `;
 
-exports[`Setup Tailwind generator 
+exports[`Setup Tailwind generator
   GIVEN global.css and tailwind config exist in commonjs format
   THEN it should generate the proper tailwind config values 1`] = `
 "const plugin = require('tailwindcss/plugin');
@@ -308,7 +308,7 @@ module.exports = {
 "
 `;
 
-exports[`Setup Tailwind generator 
+exports[`Setup Tailwind generator
   GIVEN tailwind config exist in esm format
   WHEN running the generator
   THEN it should generate the proper tailwind config values 1`] = `
@@ -443,7 +443,7 @@ export default {
 "
 `;
 
-exports[`Setup Tailwind generator 
+exports[`Setup Tailwind generator
   GIVEN tailwind config has already a plugins array
   THEN it should add the plugin with the right plugin and import 1`] = `
 "import plugin from 'tailwindcss/plugin';
diff --git a/packages/kit-styled/src/components/switch/switch.tsx b/packages/kit-styled/src/components/switch/switch.tsx
index 7aaafae5d..61f9bf727 100644
--- a/packages/kit-styled/src/components/switch/switch.tsx
+++ b/packages/kit-styled/src/components/switch/switch.tsx
@@ -7,7 +7,7 @@ const Root = component$<PropsOf<typeof HeadlessSwitch.Root>>(({ ...props }) => {
     <HeadlessSwitch.Root
       {...props}
       class={cn(
-        'tap-highlight-transparent flex cursor-pointer select-none flex-row-reverse items-center justify-between gap-1',
+        'tap-highlight-transparent flex cursor-pointer select-none flex-row-reverse items-center justify-between gap-[8px]',
         props.class,
       )}
     >
@@ -29,7 +29,18 @@ const Input = component$<PropsOf<typeof HeadlessSwitch.Input>>(({ ...props }) =>
     <HeadlessSwitch.Input
       {...props}
       class={cn(
-        'bg-switchInactive transition-bg[.25s] ease before:content-[" "] pointer-events-none box-content grid flex-shrink-0 touch-pan-y appearance-none grid-cols-[1fr] grid-rows-[1fr] rounded-full border-none p-[4px] block-size-8 inline-size-16 before:pointer-events-auto before:translate-x-[0%] before:cursor-pointer before:rounded-[50%] before:bg-background before:block-size-8 before:inline-size-8',
+        `bg-switchInactive transition-bg[.25s] ease before:content-[" "]
+        pointer-events-none box-content grid flex-shrink-0 touch-pan-y
+        appearance-none grid-cols-[1fr] grid-rows-[1fr] rounded-full
+        border-none p-[4px] block-size-8 inline-size-16 before:pointer-events-auto
+        before:translate-x-[0%] before:cursor-pointer before:rounded-[50%]
+        before:bg-background before:block-size-8 before:inline-size-8
+        enabled:hover:before:shadow-[0_0_0_0.5rem_hsla(var(--switch-thumb-color-highlight))]
+        disabled:cursor-not-allowed disabled:opacity-35 disabled:before:cursor-not-allowed
+        disabled:before:box-shadow-[inset_0_0_0_2px_hsl(0_0%_100%_/_10%)]
+        checked:bg-primary checked:before:translate-x-[100%] focus:outline-2 focus:outline-primary
+        focus:outline-offset-2,
+        `,
         props.class,
       )}
     />
diff --git a/packages/kit-styled/src/templates/tailwind.config.cjs b/packages/kit-styled/src/templates/tailwind.config.cjs
index 7c308925c..1a1d5ec60 100644
--- a/packages/kit-styled/src/templates/tailwind.config.cjs
+++ b/packages/kit-styled/src/templates/tailwind.config.cjs
@@ -49,6 +49,8 @@ module.exports = {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        switchInactive: 'hsl(var(--switch-track-color-inactive))',
+        switchThumb: 'hsl(var(--switch-thumb-color-highlight))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',