如何使用Tailwind CSS修改datetime-local日历图标颜色

原生的datetime-local输入框日历图标是浏览器默认样式，没法直接用Tailwind内置类修改，得结合自定义CSS工具类来实现，以下是具体方案：

方案一：自定义Tailwind工具类（推荐） #

在你的全局CSS文件（比如globals.css）中添加自定义工具类，利用Tailwind的@layer utilities让样式被Tailwind识别并处理：

@layer utilities {
  /* 基础样式，统一鼠标指针 */
  .calendar-icon {
    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
    }
  }
  /* 正常模式下图标颜色（对应Tailwind gray-700） */
  .calendar-icon-gray-700 {
    &::-webkit-calendar-picker-indicator {
      color: rgb(55 65 81);
      /* 如果浏览器不支持color属性，改用filter替代：
      filter: brightness(0.3);
      */
    }
  }
  /* 暗黑模式下图标颜色（对应Tailwind white） */
  .dark .calendar-icon-white {
    &::-webkit-calendar-picker-indicator {
      color: rgb(255 255 255);
      /* 不支持color时用：
      filter: brightness(1);
      */
    }
  }
}

然后修改你的input代码，添加对应的工具类：

<span className="dark:text-dark-text text-xs text-gray-700">
  End Date
</span>
<input
  type="datetime-local"
  className="dark:bg-dark-bg mt-1 block w-full rounded border-gray-400 text-sm dark:border-gray-600 dark:text-white calendar-icon calendar-icon-gray-700 calendar-icon-white"
  value={value.customRangeEnd}
  onChange={onChangeCustomRangeEnd}
/>

方案二：组件内直接写样式 #

如果不想修改全局CSS，也可以在组件内嵌入样式，结合Tailwind的颜色变量：

<style>
  .custom-calendar::-webkit-calendar-picker-indicator {
    color: theme('colors.gray.700');
    cursor: pointer;
  }
  .dark .custom-calendar::-webkit-calendar-picker-indicator {
    color: theme('colors.white');
  }
</style>

<span className="dark:text-dark-text text-xs text-gray-700">
  End Date
</span>
<input
  type="datetime-local"
  className="dark:bg-dark-bg mt-1 block w-full rounded border-gray-400 text-sm dark:border-gray-600 dark:text-white custom-calendar"
  value={value.customRangeEnd}
  onChange={onChangeCustomRangeEnd}
/>

兼容性说明 #

• 不同浏览器的伪元素前缀略有差异，比如Firefox用::-moz-calendar-picker-indicator，不过你的PostCSS已启用autoprefixer，会自动处理前缀适配。
• 部分旧浏览器可能不支持直接设置伪元素的color属性，这时改用filter属性（比如brightness()、invert()）来调整颜色即可。

内容的提问来源于stack exchange，提问作者David Yandún