svelte-calendar icon indicating copy to clipboard operation
svelte-calendar copied to clipboard

Tailwind breaks svelte-calendar's css

Open mtrevor opened this issue 3 years ago • 1 comments

I have been using Tailwind with svelte-calendar quite happily for a while, but since the theming changes have been added, it no longer works correctly. It looks like some of the Tailwind utility selectors may be conflicting with this component now.

I stripped it back to a basic app:

<script>
  import { Datepicker } from "svelte-calendar"
</script>

<Datepicker />

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

image

It looks like I can get around this by prefixing every Tailwind selector but that's a massive task to get a component that was previously working fine to display correctly again.

Is there a known way to avoid this?

mtrevor avatar Nov 23 '21 06:11 mtrevor

Hey @mtrevor - thanks for using the calendar and sharing your experience. The latest updates were intentionally versioned as a major release to warn of possible breaking changes as it was completely rewritten. However, I'd love to figure out what's going on for you as I know tailwind is fairly popular.

I have not used tailwind myself, though. Is there any chance you could provide a minimal replication of the bug via the svelte repl or a small example repository?

6eDesign avatar Dec 01 '21 04:12 6eDesign