toggle input for tailwindcss
npm install tailwindcss-togglenpm i tailwindcss-toggle
{
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