Styling Tippy.js With Tailwind CSS (including Dark Mode)
Tippy.js is a great library that allows you to seamlessly create beatiful popovers. However, I personally miss some of theming capabilities, which led me to come up with a solution on how to override the default theme using Tailwind CSS . .tippy-box[data-theme~='light'] { @apply bg-red-200; } .tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before { @apply border-t-green-200; } .tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before { @apply border-l-green-200; } .tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before { @apply border-r-green-200; } .tippy-box[data-theme~='light'][data-placement^='bottom'] > ....