Tailwind

Tailwind v4 is supported. Earlier versions are not: v3's preflight is unlayered, so it beats the theme and strips the parts' button backgrounds and borders.

Import into the components layerCopy Anchor Link

@import 'tailwindcss';
@import '@calendar-tsx/themes/default.css' layer(components);

Tailwind's layers run theme, base, components, utilities, so the theme lands between preflight and your utilities:

• It beats preflight, whose button reset (background-color: transparent, border-radius: 0) would otherwise strip every event, trigger and overflow, since parts render native buttons.
• Utilities beat it: bg-sky-600 text-white on a DayGridViewRowEvent overrides the theme.

Imported without layer(components), the theme's layers come after utilities and override every utility class on a part.

TokensCopy Anchor Link

Point the tokens at Tailwind's theme variables so the calendar follows your palette:

:root {
  --calendar-accent: light-dark(var(--color-indigo-600), var(--color-indigo-400));
  --calendar-border: light-dark(var(--color-zinc-200), var(--color-zinc-800));
  --calendar-radius: var(--radius-lg);
}

Dark modeCopy Anchor Link

The theme follows color-scheme, not the dark: variant, so pair them:

• With the default prefers-color-scheme strategy, put scheme-light-dark on <html>.
• With a .dark class, use class='dark scheme-dark'.

The shadcn/ui theme follows .dark directly.

Utilities onlyCopy Anchor Link

To style every part yourself, import base.css alone in the same layer:

@import 'tailwindcss';
@import '@calendar-tsx/themes/base.css' layer(components);

Then use the parts' state attributes as variants. Boolean attributes (data-today, data-outside, data-overlap, data-unavailable, data-all-day, data-multi-day, data-continues-before, data-continues-after) match data-*:, and descendants of a part reach them with in-data-*::

export const Day = ({ calendar, day }: { calendar: DayCalendar; day: Calendar_DayGridDay<Booking> }) => (
  <DayGridViewDay day={day} className='p-1 data-outside:bg-zinc-50 data-outside:text-zinc-500'>
    <DayGridViewDayTrigger
      calendar={calendar}
      day={day}
      view='day'
      className='size-7 rounded-full in-data-today:bg-indigo-600 in-data-today:text-white'
    >
      {day.date.day}
    </DayGridViewDayTrigger>
  </DayGridViewDay>
);