CODEWITHSUNDEEP
reactjstailwind-csspostcss
David Yandún
David Yandún

Reputation: 41

How can I change the color of the calendar icon with Tailwind CSS?

I'm having trouble changing the color of the calendar icon on my post. If I have autoprefixes enabled

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

this is my 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"
          value={value.customRangeEnd}
          onChange={onChangeCustomRangeEnd}
        />
      </label>

Upvotes: 4

Views: 8777

Answers (2)

Grace Effiong
Grace Effiong

Reputation: 101

This solved the problem when in darkMode. className="dark:[color-scheme:dark]"

Upvotes: 10

Il&#234; Caian
Il&#234; Caian

Reputation: 655

Maybe you are searching for how to customize the calendar indicator for an <input /> element with the type="date" at a specific browser. I'm assuming you are using Chrome so, the way to customize that is through the -webkit-calendar-picker-indicator pseudo-element.

You can use filter to change opacity, hue-rotation, or even try the color-scheme to change that too.

As a suggestion and expecting that your code works on all browsers, you could use some icon/svg and change the color directly, setting the -webkit-calendar-picker-indicator to something like display: none.

This answer could help you to understand more about it.

About the usage of Tailwindcss to do it, I think you'll need to add those changes as some kind of "custom CSS" or something like that.

Upvotes: 4

Related Questions