[Vuejs]-Vue Tailwind Datapicker -> How can I change the rounding/specific color on selected dates?

by

1👍

✅

Edit: I forked the package’s playground environment and customized as written in this answer. You can see how it works here.

Notice how I changed the 500 part of the color to black in the tailwind config. Also, the button style override is in the index.css file.

What I did:

For your first question, you can override the rounding by declaring the following css in your component or global styles:

button.vtd-datepicker-date {
  @apply rounded-lg;
}

Update the rounded class as you wish.

In terms of adjusting the color, it appears that the package accepts an entire color object, rather than a string of hex code.
From the official documentation, colors.sky returns the Tailwind color palette of 50 – 900.

In that case, 'vtd-primary': colors.sky essentially returns

'vtd-primary': {
    '50': "#f0f9ff",
    '100': "#e0f2fe",
    '200': "#bae6fd",
    '300': "#7dd3fc",
    '400': "#38bdf8",
    '500': "#000", // changed this to black
    '600': "#0284c7",
    '700': "#0369a1",
    '800': "#075985",
    '900': "#0c4a6e"
}

Now, for you to customize, you should create a color palette of your desired color (if Tailwind does not already have something that matches it); then you pass the colors (from 50-900) in an object as shown above.

You can simply copy and paste the object above and modify to your colors.

I hope this solves your problem.

Cheers!

👤eYinka

Leave a comment