Tailwind CSS 打造颜色匹配工具-JavaScript中文网-JavaScript教程资源分享门户

Tailwind CSS 是近年来非常流行的一种新型 CSS 框架，它以“Utility-First”为设计理念，提供了一种全新的样式定义与组合方式。其特点是基于类名的样式定义，而不是元素名、id 或 class，通过对单一属性定义的类名的组合，可以快速构建出样式丰富、复杂度较高的项目。

除此之外，Tailwind CSS 还内置了大量的颜色定义，用户可以通过自由组合这些颜色，来快速构建出大量的色彩变化的效果。

在本文中，我们将利用 Tailwind CSS 中的颜色定义，打造一个简单的颜色匹配工具。

工具设计

颜色匹配工具的核心是颜色选择器，用户通过选择不同的颜色，来匹配出符合自己风格的颜色方案。

我们考虑实现以下功能：

用户可以通过输入颜色代码或者使用颜色选择器，选择自己喜欢的基础颜色；
用户可以根据喜好选择不同的色调，比如亮色调或暗色调；
用户可以选择不同的颜色比例，比如高比例的主色和低比例的辅色；
用户可以通过按钮或链接，复制所选的颜色代码。

针对这些功能，我们需要设计一个相应的页面。首先，我们需要输入框和颜色选择器组合形式，如下图所示：

选择好基础颜色后，我们可以根据自己的喜好，选择相应的色调。如下图所示：

经过选择后，页面会自动呈现选择的颜色方案，如下图所示：

对于选择的颜色方案，我们可以选择不同的比例进行匹配。如下图所示：

最终，用户可以通过按钮或者链接，复制所选的颜色代码，如下图所示：

工具实现

使用 Tailwind CSS 打造颜色匹配工具，代码实现相对简单。首先，我们需要在 HTML 代码中引入 Tailwind CSS：

// www.javascriptcn.com code example
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/tailwindcss@1.9.0/dist/tailwind.min.css"
    />
    <title>Tailwind Color Picker</title>
  </head>
  <body>
    ...
  </body>
</html>

接下来，我们需要在 HTML 代码中写入选择框和颜色选择器。

// www.javascriptcn.com code example
<!-- index.html -->
<!-- 颜色选择器和输入框 -->
<div class="flex flex-col items-start w-4/5 py-4 lg:w-3/5">
  <label class="text-base font-bold">Color Picker</label>
  <div class="flex flex-col lg:flex-row mt-4 w-full">
    <!-- 输入框 -->
    <input
      type="text"
      class="w-full lg:w-1/2 py-2 px-4 bg-gray-200 border-2 border-gray-300 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
      id="color_code"
    />
    <!-- 颜色选择器 -->
    <div class="flex mt-2 lg:mt-0 lg:ml-2">
      <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="grid grid-cols-10 grid-rows-8">
          <!-- 颜色按钮 -->
        </div>
      </div>
    </div>
  </div>
</div>

这里我们使用了 Tailwind CSS 中的 Grid 布局。其中，输入框使用了一些预定义的样式（如背景、边框等），使其看起来更加的美观和实用。

接下来，我们需要编写 JavaScript 代码，使用 Tailwind CSS 中自带的颜色，以及引入的颜色插件 tinycolor2，来实现颜色选择器的功能。

// www.javascriptcn.com code example
// app.js
// 选择器 HTML 布局
const pickerGrid = document.querySelector(".grid");
pickerGrid.innerHTML = "";
const colors = Object.keys(tailwindColors);
colors.forEach((color, index) => {
  const colorHex = tailwindColors[color][500];
  const colorElement = document.createElement("button");
  colorElement.classList =
    "bg-" + color + "-500 h-10 w-10 rounded-lg border-2 border-white hover:border-gray-200 focus:border-gray-200 focus:outline-none active:outline-none";
  colorElement.id = color + "-button";
  colorElement.dataset.color = colorHex;
  if (index === 4) {
    colorElement.classList.add("row-start-4");
    colorElement.classList.add("col-start-5");
  }
  pickerGrid.appendChild(colorElement);
});

// 颜色选择器事件绑定
const colorPicker = document.querySelector("#picker-container .grid");
colorPicker.addEventListener("click", function (event) {
  const target = event.target;
  if (target && target.nodeName == "BUTTON") {
    const color = target.dataset.color;
    const colorInput = document.querySelector("#color_code");
    colorInput.value = color;
    changeColors(color);
  }
});

// 输入框事件绑定
const colorInput = document.querySelector("#color_code");
colorInput.addEventListener("change", function (event) {
  const color = this.value;
  if (tinycolor(color).isValid()) {
    changeColors(color);
  }
});

// 颜色计算接口
function changeColors(baseColor) {
  const colors = {};
  colors["primary"] = tinycolor(baseColor).lighten(5).toString();
  colors["secondary"] = tinycolor(baseColor).lighten(15).toString();
  colors["tertiary"] = tinycolor(baseColor).lighten(30).toString();
  colors["gray"] = tinycolor(baseColor).desaturate(50).toString();
  colors["accent"] = tinycolor(baseColor).saturate().toString();

  // 更新页面
  const colorSchema = document.querySelectorAll(".color-schema");
  colorSchema.forEach((element) => {
    const name = element.dataset.name;
    const percent = element.value / 100;
    const color = tinycolor(colors[name])
      .lighten(percent * 100)
      .toString();
    element.style.backgroundColor = color;
    element.innerText = color;
  });
}

这里，我们使用 Tailwind CSS 中的颜色进行基础颜色的选取。同时，我们还引入了颜色插件 tinycolor2，在其中编写了 changeColors 函数，用于计算出选择颜色对应的色值方案。最后，我们将匹配好的颜色，应用到 HTML 中对应的元素上，以此来实现所需的效果。

最后，我们还需要在 HTML 代码中写入颜色方案的 HTML 布局。

// www.javascriptcn.com code example
<!-- index.html -->
<!-- 颜色方案 -->
<div class="flex flex-col lg:flex-row mt-12 w-full">
  <div class="flex flex-col w-full mb-4 lg:mb-0 lg:w-3/5">
    <label class="text-base font-bold mb-4">Color schema</label>
    <div class="flex flex-col lg:flex-row items-center justify-between">
      <input
        type="range"
        id="primary"
        class="bg-gray-200 appearance-none w-full lg:w-auto h-1 rounded-sm lg:rounded-full outline-none h-8 mr-2 focus:bg-gray-300"
        value="50"
        min="0"
        max="100"
        data-name="primary"
      />
      <div
        data-name="primary"
        class="border rounded-lg h-10 lg:h-auto lg:w-32 flex items-center justify-center px-6 color-schema"
      >
        #6B7280
      </div>
    </div>
    ...
  </div>
  ...
</div>

我们通过 HTML 标签来定义一个颜色显示框和一个滑块。通过给滑块增添 data-name 属性，来将它与新颜色方案中的颜色绑定起来。其中的 color-schema 类，用于后面更新其颜色和文字值，实现颜色方案的实时切换。

工具意义

本文介绍了如何使用 Tailwind CSS 、HTML 和 JavaScript ，快速实现一个颜色匹配工具。通过这个工具，用户可以方便、快速地生成符合自己风格的颜色方案。

这个工具不仅仅是一个实用工具，而且是在学习 Tailwind CSS 和 CSS 设计的过程中一个不错的参考案例。通过对 Tailwind CSS 的熟悉了解，我们可以快速地通过类名组合的方式构建出复杂的样式，同时，通过这个颜色匹配工具，我们也可以深入领会到颜色的搭配并应用到实际项目中。

因此，我们相信这个颜色匹配工具既有实用价值，同时也有教育意义，相信读者们可以从中获得不少的启发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7cce6a941bf7134df62dc

Tailwind CSS 打造颜色匹配工具

工具设计

工具实现

工具意义

接着读