Search code examples
vue.jsdatepickervue-componenttailwind-css

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

I want to change the rounding of selected data to be more square. Also how can i use specify color in tailwind.config file to be compatibile with this component? Because for now that vtd-primary color doesn't work

enter image description here enter image description here

Solution

  • 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!