Published on

3 Things You Must Know To Create A switch boton With Tailwind CSS

switch boton

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to help you build custom user interfaces quickly. It is designed to be highly customizable, allowing you to create unique designs without having to write custom CSS from scratch.

The Description of Switch Boton UI Component

A switch boton is a UI component that allows users to toggle between two states, typically on/off or yes/no. It is commonly used in settings or preferences pages to allow users to enable or disable certain features.

Why Use Tailwind CSS to Create a Switch Boton UI Component?

Tailwind CSS provides a set of pre-defined classes that make it easy to create custom UI components like switch botons. By using Tailwind CSS, you can save time and effort by not having to write custom CSS from scratch.

The Preview of Switch Boton UI Component

To create a switch boton with Tailwind CSS, you will need to use a combination of HTML and CSS classes. Here is a preview of what the switch boton will look like:

Free download of the switch boton's source code

The Source Code of Switch Boton UI Component

To create the switch boton, you will need to use the following HTML and CSS classes:

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="btn.css" />
      <title>Boton con tailwindcss</title>
     <style>
     	:root {
   --bg-btn: #fed7d7;
   --btn-color: #e53e3e;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

#checkbox:checked ~ .btn-change::before {
   transition: 0.3s;
   transform: translateX(23px);
}

.btn-change {
   background-color: var(--bg-btn);
}

.btn-change::before {
   content: '';
   display: block;
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background-color: var(--btn-color);
   transition: 0.3s;
   transform: translateX(0);
}

     </style>
   </head>
   <body class="w-screen h-screen flex justify-center items-center bg-gray-100">
      <div class="btn-status">
         <input type="checkbox" name="checkbox" id="checkbox" class="hidden" />
         <label
            for="checkbox"
            class="btn-change flex items-center p-1 rounded-lg w-12 h-6 cursor-pointer"
         ></label>
      </div>

      <script>
         const btn = document.querySelector('.btn-change');

         btn.addEventListener('click', () => {
            if (document.getElementById('checkbox').checked) {
               btn.style.setProperty('--bg-btn', '#fed7d7');
               btn.style.setProperty('--btn-color', '#e53e3e');
            } else {
               btn.style.setProperty('--bg-btn', '#C6F6D5');
               btn.style.setProperty('--btn-color', '#38A169');
            }
         });
      </script>
   </body>
</html>

How to Create a Switch Boton with Tailwind CSS?

Here are the three things you need to know to create a switch boton with Tailwind CSS:

1. Use the Input Element

To create a switch boton, you will need to use the input element with the type attribute set to "checkbox". This will create a checkbox that can be toggled on and off.

<input type="checkbox" class="form-checkbox h-5 w-5 text-green-500">

2. Use the Label Element

To create a switch boton, you will also need to use the label element. The label element is used to associate the checkbox with its label text.

<label for="toggle" class="flex items-center cursor-pointer">

3. Use Tailwind CSS Classes

Finally, you will need to use Tailwind CSS classes to style the switch boton. Here are the classes you will need to use:

  • form-checkbox: This class styles the checkbox element.
  • h-5: This class sets the height of the checkbox to 5 pixels.
  • w-5: This class sets the width of the checkbox to 5 pixels.
  • text-green-500: This class sets the color of the checkbox to green.

Here is the complete HTML code for the switch boton:

<div class="flex items-center justify-center">
  <input type="checkbox" class="form-checkbox h-5 w-5 text-green-500" id="toggle">
  <label for="toggle" class="flex items-center cursor-pointer">
    <div class="relative">
      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
      <div class="absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"></div>
    </div>
    <div class="ml-3 text-gray-700 font-medium">Toggle me</div>
  </label>
</div>

Conclusion

Creating a switch boton with Tailwind CSS is easy and requires only a few lines of HTML and CSS. By using Tailwind CSS, you can save time and effort by not having to write custom CSS from scratch. With these three tips, you can create custom switch botons that look great and are easy to use.