Overwriting Custom Component CSS Properties

[adamleemiller]

Hello! I am writing a web application using Vue 3 + Tailwind. I am trying to use the Vue3DatePicker component found here: https://vue3datepicker.com. I have the component working however, I need to override some styles. In my stylesheet.css file, I have tried the following all with various errors:

.dp__theme_dark {
  --dp-background-color: theme(--bg-zinc-700);
}

Error: '--bg-zinc-700' does not exist in your theme config.

.dp__theme_dark {
  @apply
  --dp-background-color: --bg-zinc-700;
}

Error: The --dp-background-color: class does not exist. If --dp-background-color: is a custom class, make sure it is defined within a @layer directive.

What is the proper way to handle this? Is there one or am I stuck creating some kind of custom CSS variable or just using the hard coded colors from Tailwind?

Any help is appreciated. Thank you.

[alex-krasikau]

Hey @adamleemiller!

You are using the incorrect syntax. The correct one is theme("colors.zinc.700").

Check out the full example at: https://play.tailwindcss.com/xFQLiuxV78?file=css

[adamleemiller]

Ah, thank you! My bad. I appreciate the quick reply.