Tailwind Checkbox Toggle Pure jQuery logic and Tailwind CSS (v2.x) syntax. Customizable with data attributes.

Demo

• Normal
• Custom
• Disabled
• Small
• Big

Options data-

• rounded rounded[-none|-sm|-lg|-full] default: rounded-full
• handle-size int default: 20
• handle-color bg-[color] default: bg-white
• off-color bg-[color] default: bg-gray-500
• on-color bg-[color] default: bg-blue-400

Usage

Markup

Include a reference to jQuery and the jquery-tailwind-toggle.js file in this repo, preferrably right before the </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery-tailwind-toggle.js"></script>

Simple (default options)

<label data-toggle="checkbox-toggle">
  <input type="checkbox" />
</label>

All Options

<label
  data-toggle="checkbox-toggle"
  data-rounded="rounded"
  data-handle-size="20"
  data-handle-color="bg-white"
  data-off-color="bg-gray-500"
  data-on-color="bg-blue-400">
  <input type="checkbox" />
</label>