如何移除ReactJS + Tailwind中颜色输入框的内部边框？

我正在使用ReactJS与TailwindCSS开发，想要移除color类型input组件的内部灰色边框，但尝试后未能成功，希望获得用Tailwind实现的解决方案。

问题截图 #

现有代码 #

import * as React from "react";
import { useState, ChangeEvent } from "react";


export default function App() {
  const [selectedColor, setSelectedColor] = useState("#1C4B40");

  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
    let inputValue = event.target.value;
    if (!inputValue.startsWith("#")) {
      inputValue = `#${inputValue}`;
    }
    setSelectedColor(inputValue);
  };

  return (
    <div className="bg-gray-500">
      <input
        id="colorPicker"
        type="color"
        style={{
          WebkitAppearance: "none",
          appearance: "none",
          backgroundColor: selectedColor,
          borderColor: selectedColor,
          outline: "none"
        }}
        className="h-8 w-8 cursor-pointer rounded-[4px] border-none"
        value={selectedColor}
        onChange={handleColorChange}
      />
    </div>
  );
}

Tailwind实现的解决方案 #

color类型input的内部灰色边框来自浏览器默认的::-webkit-color-swatch伪元素样式，同时::-webkit-color-swatch-wrapper存在默认内边距，需要针对这两个伪元素重置样式。以下是纯Tailwind风格的实现方式：

步骤1：自定义Tailwind工具类

在项目的tailwind.config.js中添加自定义工具类，统一处理颜色选择器的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.color-picker-clean': {
          '&::-webkit-color-swatch': {
            border: 'none',
            borderRadius: '4px',
          },
          '&::-webkit-color-swatch-wrapper': {
            padding: '0',
          },
          appearance: 'none',
        },
      });
    },
  ],
};

步骤2：修改组件代码

移除冗余的内联样式，直接使用自定义的Tailwind工具类：

import * as React from "react";
import { useState, ChangeEvent } from "react";

export default function App() {
  const [selectedColor, setSelectedColor] = useState("#1C4B40");

  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
    let inputValue = event.target.value;
    if (!inputValue.startsWith("#")) {
      inputValue = `#${inputValue}`;
    }
    setSelectedColor(inputValue);
  };

  return (
    <div className="bg-gray-500">
      <input
        id="colorPicker"
        type="color"
        className="h-8 w-8 cursor-pointer rounded-[4px] border-none color-picker-clean"
        value={selectedColor}
        onChange={handleColorChange}
      />
    </div>
  );
}

这样就能完全移除颜色选择器的内部灰色边框，同时保持Tailwind样式体系的一致性。

内容的提问来源于stack exchange，提问作者user22315520