Published on

Learn How To Build A Color Picker With Tailwind CSS Like an Expert

Tags
AlpinejsInputs
Color picker

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to create custom designs without writing any CSS. It provides a set of pre-defined classes that you can use to style your HTML elements. With Tailwind CSS, you can easily create responsive and mobile-first designs.

The description of Color picker ui component

A color picker is a user interface component that allows users to select a color from a color palette. It is commonly used in web applications to allow users to customize the color of elements such as text, backgrounds, and borders.

Why use Tailwind CSS to create a Color picker ui component?

Tailwind CSS provides a set of pre-defined classes that you can use to create a color picker UI component quickly and easily. You don't need to write any CSS code, which saves you time and effort. Additionally, Tailwind CSS is highly customizable, so you can easily modify the color picker to fit your specific needs.

The preview of Color picker ui component

To create a color picker UI component with Tailwind CSS, we will use a combination of HTML and CSS. Here is a preview of what the final color picker will look like:

Free download of the Color picker's source code

The source code of Color picker ui component

To create the color picker UI component, we will use a combination of HTML and CSS. Here is the source code for the color picker:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<div class="bg-white mx-auto my-auto p-6">
  <div x-data="app()" x-init="[initColor()]">
    <div>
      <label for="color-picker" class="block mb-1 font-semibold">Select a color</label>
      <div class="flex flex-row relative">
        <input id="color-picker" class="border border-gray-400 p-2 rounded-lg" x-model="currentColor">
        <div @click="isOpen = !isOpen" class="cursor-pointer rounded-full ml-3 my-auto h-10 w-10 flex" :class="`bg-${currentColor}`" >
          <svg xmlns="http://www.w3.org/2000/svg" :class="`${iconColor}`" class="h-6 w-6 mx-auto my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
          </svg>
        </div>
        <div x-show="isOpen" @click.away="isOpen = false" x-transition:enter="transition ease-out duration-100 transform"
          x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
          x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100"
          x-transition:leave-end="opacity-0 scale-95" class="border border-gray-300 origin-top-right absolute right-0 top-full mt-2 rounded-md shadow-lg">
          <div class="rounded-md bg-white shadow-xs p-2">
            <div class="flex">
              <template x-for="color in colors">
                <div class="">
                  <template x-for="variant in variants">
                    <div @click="selectColor(color,variant)" class="cursor-pointer w-6 h-6 rounded-full mx-1 my-1" :class="`bg-${color}-${variant}`"></div>
                  </template>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function app() {
      return {
        colors: ['gray', 'red', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink'],
        variants: [100, 200, 300, 400, 500, 600, 700, 800, 900],
        currentColor: '',
        iconColor: '',
        isOpen: false,
        initColor () {
          this.currentColor = 'red-800'
          this.setIconWhite()
        },
        setIconWhite () {
          this.iconColor = 'text-white'
        },
        setIconBlack () {
          this.iconColor = 'text-black'
        },
        selectColor (color, variant) {
          this.currentColor = color + '-' + variant
          if (variant < 500) {
            this.setIconBlack()
          }
          else {
            this.setIconWhite()
          }
        }
      }
  }
</script>

How to create a Color picker with Tailwind CSS?

To create a color picker with Tailwind CSS, follow these steps:

Step 1: Create the HTML structure

The first step is to create the HTML structure for the color picker. We will use a combination of divs, inputs, and labels to create the color picker. Here is the HTML code:

<div class="flex items-center">
  <label for="color-picker" class="mr-2">Color:</label>
  <input type="color" id="color-picker" class="appearance-none w-8 h-8 rounded-full border border-gray-400">
</div>

In this code, we have created a div with the class "flex items-center" to align the label and input elements horizontally. We have also added a label element with the "for" attribute set to "color-picker" to associate it with the input element. Finally, we have added an input element with the type "color" to create the color picker.

Step 2: Style the color picker

Now that we have created the HTML structure, we can style the color picker using Tailwind CSS classes. Here is the CSS code:

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

input[type="color"]::-moz-focus-inner {
  border: none;
}

input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

In this code, we have used CSS pseudo-elements to style the color picker. We have removed the default padding and border from the color swatch wrapper and added a border-radius and box-shadow to the color swatch. We have also removed the default border from the Mozilla Firefox color swatch and removed the focus border from the color picker.

Step 3: Customize the color picker

Finally, we can customize the color picker to fit our specific needs. For example, we can change the size and color of the color swatch, or we can add additional styles to the label and input elements. Here is an example of how to customize the color picker:

<div class="flex items-center">
  <label for="color-picker" class="mr-2 text-gray-700 font-bold">Choose a color:</label>
  <input type="color" id="color-picker" class="appearance-none w-12 h-12 rounded-full border-2 border-gray-400">
</div>

In this code, we have changed the size of the color swatch to 12x12 pixels and added a border of 2 pixels. We have also changed the color and font-weight of the label element.

Conclusion

In conclusion, Tailwind CSS is a powerful CSS framework that allows you to create custom designs quickly and easily. With Tailwind CSS, you can create a color picker UI component in just a few steps. By following the steps outlined in this article, you can create a color picker that is highly customizable and fits your specific needs.