search

6eDesign / svelte-calendar

A lightweight datepicker with neat animations and a unique UX.
https://6edesign.github.io/svelte-calendar/
MIT License
537 stars 89 forks source link

Tailwind breaks svelte-calendar's css #141

Open mtrevor opened 2 years ago

mtrevor commented 2 years ago

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?

6eDesign commented 2 years ago

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?