Toggle Plugin for Tailwind CSS

Installation

npm i tailwindcss-toggle

Usage

{
	theme: {
		extend: {
			inset: {
				'-1/4': '-.25rem', //For A perfect position , you can change it to your desired width and height for your toogle
			},
			colors:{
				'primary': '#276749' //optional colors (By default the plugin uses the config colors)
			},
		},
	},
	variants: {},
	plugins: [
		require('tailwindcss-toggle')(),
	],
}

This plugin generates the following utilities:

toggle-input-purple-800:checked ~ .toggle__dot {
    transform: translateX(100%);
    background-color: #553c9a;
}

to use the full html

you can change colors , width and height , but don't forget to set your insets

Based on CodePen tutorial https://codepen.io/lhermann/pen/EBGZRZ