node v22.12 breaks (at least) toggle switch component

[RSchmitzHH]

Summary

Preline's Tailwind CSS Switch/Toggle breaks when updating node to v22.12. Works like charm with node v20.4 and 20.5

Steps to Reproduce

1. create this dummy component (unaltered copy of https://preline.co/docs/switch.html )

<script setup lang="ts">
</script>

<template>

    <div class="flex flex-col w-full h-full justify-center items-center bg-gray-50">

        <input type="checkbox" id="hs-basic-usage" class="relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600
        before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
        <label for="hs-basic-usage" class="sr-only">switch</label>

    </div>

</template>

2. run with vue and node v20.4 or 20.5 => everything fine

3. run with node v22.12 => broken

I have downgraded back to v20.5 (originally started form 20.4), cannot exclude that other components are affected as well.

Complete setup

 "dependencies": {
    ...
    "@popperjs/core": "^2.11.8",
    "@preline/accordion": "^2.6.0",
    "@preline/collapse": "^2.6.0",
    "@preline/copy-markup": "^2.6.0",
    "@preline/dropdown": "^2.6.0",
    "@preline/overlay": "^2.6.0",
    "@preline/select": "^2.6.0",
    "@preline/stepper": "^2.6.0",
    "@preline/tabs": "^2.6.0",
    "@preline/textarea-auto-height": "^2.6.0",
    "@preline/theme-switch": "^2.6.0",
    "@preline/toggle-count": "^2.6.0",
    "@preline/tooltip": "^2.5.0",
   ...
    "@tailwindcss/forms": "^0.5.9",     // I updated this to 0.5.9 which did not help
    "@tailwindcss/typography": "^0.5.12",
    "@tiptap/core": "^2.5.4",
   ....
    "@vitejs/plugin-vue": "^5.2.1",
    ...
    "tailwindcss": "^3.4.3",
    "vue": "^3.5.12",
   ...
  },
  "devDependencies": {
  ....
    "typescript": "~4.5.5",
    "vite": "^5.4.10",
....
  }

Demo Link

N/A

Expected Behavior

As in 2.

Actual Behavior

As in 3.

Screenshots

See above.

[sbeckerdev]

Did you try using the tailwind plugin toggle? I tested it with Node 22 and 23 and it is fully working.

[RSchmitzHH]

Which one do you mean? I copied the preline toggle from the docu and just switched between node 20 and 22.

[jahaganiev]

Hey @RSchmitzHH,

We've re-written the toggle switch component with the latest Tailwind v4 support update. It has been tested with the latest node version v22.13.1 as well.

https://preline.co/docs/switch.html

Cheers!