> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling with Tailwind & CSS

> Restyle any part of the calendar with per-slot classes and inline styles, on the web and on React Native.

<Note>
  Both renderers support per-slot `classNames` / `styles`. On the web they work with any CSS setup;
  on React Native the classes need a Tailwind runtime such as [uniwind](https://docs.uniwind.dev) or
  NativeWind (see [React Native](#react-native-uniwind--nativewind) below). For colours, typography,
  and metrics in one place, see [Theming](/guides/theming).
</Note>

The components render with inline styles driven by the [theme](/guides/theming),
so a zero-config `<Calendar />` looks complete with no stylesheet. But inline styles
beat external CSS, which would leave a Tailwind class powerless to override them. To
close that gap, every styleable part is a named **slot** you can target with a class,
an inline style, or a `data-*` state variant.

## Per-slot classes

Pass `classNames` to hand a slot over to your own CSS or Tailwind:

```tsx theme={null}
import { MonthView } from "@super-calendar/dom";

<MonthView
  date={new Date()}
  classNames={{
    title: "text-center text-2xl font-semibold text-slate-900",
    weekday: "uppercase tracking-wide text-slate-400",
    day: "hover:bg-slate-50",
  }}
/>;
```

The contract, per slot:

* **Structural styles always apply** — the layout the component needs to hold together
  (grid templates, flex, positioning). Your class is added on top; you never have to
  re-implement the grid.
* **Themed styles drop when you pass a class** — colour, typography, spacing, and
  borders step aside so your class wins instead of losing to an inline style.

So `classNames={{ title: "text-center" }}` genuinely centers the title: the built-in
`font-weight`/`font-size`/`padding` are removed for that slot, leaving your class in
full control.

## Per-slot inline styles

For one-off tweaks without a stylesheet, use `styles`. These merge **last**, on top of
the retained defaults (and win over classes):

```tsx theme={null}
import { MonthView } from "@super-calendar/dom";

<MonthView styles={{ title: { textAlign: "center" }, day: { borderRadius: 8 } }} />;
```

## React Native (uniwind / NativeWind)

The native renderer accepts the same `classNames` / `styles` maps with the same
contract. Class strings pass through to the underlying `View`/`Text` elements, where a
Tailwind runtime resolves them; the library ships TypeScript source through the
`react-native` export condition, so your bundler compiles it with your Tailwind setup.
Without such a runtime, `className` is ignored and `styles` still works.

With [uniwind](https://docs.uniwind.dev), no extra configuration is needed beyond its
quickstart; classes you pass from your app code are picked up by Tailwind's automatic
content scanning:

```tsx theme={null}
import { Calendar } from "@super-calendar/native";

<Calendar
  mode="month"
  date={date}
  events={events}
  classNames={{
    title: "text-center text-xl font-bold text-indigo-900",
    weekday: "uppercase tracking-wider text-indigo-400",
    day: "border-t border-r border-indigo-50",
  }}
  onChangeDate={setDate}
  onPressEvent={onPress}
/>;
```

Differences from the web renderer:

* **No `data-*` state variants.** React Native has no CSS selectors; state styling
  (today, selected) stays with the [theme](/guides/theming), or replace the part with
  a custom renderer.
* **Slot names differ where the structure does.** Native adds text slots
  (`dayBadgeText`, `columnHeaderDateText`) because text colour doesn't inherit from a
  parent view, plus `weekendShade` and `daySeparator` for layers the dom styles
  through `dayColumn`. It omits dom-only slots (`hourGutter`, `dayColumn`, `events`,
  `chipButton`, `chip`, `eventBox`).
* **Event chips and cards are `renderEvent`'s job.** To restyle them with Tailwind,
  pass your own `renderEvent` (or `renderMonthEvent` etc.) built from classed
  components.
* **Animated slots.** `gridLines` sub-hour dividers, `businessHours`, `weekendShade`,
  `daySeparator`, `event`, `nowIndicator`, and `createGhost` render as Reanimated
  views. Their `styles` overrides always apply; whether `className` resolves there
  depends on your runtime's support for Animated components.
* **Pass stable references.** Define the `classNames` / `styles` maps at module scope
  (or wrap them in `useMemo`). Inline literals still work, but they change identity on
  every render, so the calendar re-resolves its slots each time instead of skipping
  the work.

## State variants with `data-*` (web only)

Day cells expose their state as present/absent `data-*` attributes, so you can style
selection, today, and more with Tailwind variants or plain CSS — no JS:

```tsx theme={null}
import { MonthView } from "@super-calendar/dom";

<MonthView
  classNames={{
    day: "data-[today]:bg-blue-600 data-[today]:text-white data-[selected]:ring-2",
  }}
/>;
```

On the month grid, day state sits on both the `day` cell and its `dayBadge`, so a
variant works on either slot (e.g. `dayBadge: "data-[today]:bg-blue-600"`).

| Attribute       | On                | Present when                            |
| --------------- | ----------------- | --------------------------------------- |
| `data-today`    | day / badge / col | it is today                             |
| `data-selected` | day / badge       | the day is selected                     |
| `data-range`    | day / badge       | the day is inside a selected range      |
| `data-weekend`  | day / badge / col | the day is a weekend                    |
| `data-outside`  | day / badge       | the day belongs to an adjacent month    |
| `data-disabled` | day / badge       | the day is disabled (`min`/`maxDate`)   |
| `data-creating` | day / badge       | the day is inside a drag-to-create span |
| `data-dragging` | time-grid event   | the event is being dragged              |

Every slotted element also carries a stable `data-slot="<name>"` attribute, handy for
CSS selectors (`[data-slot="title"] { … }`) and for tests.

## Slots by component

Each component keeps its own `className` / `style` props for the root element; the
slots below target its inner parts. `Calendar` accepts every slot and forwards them
to whichever view its `mode` renders. `MonthList` uses `weekdays` / `weekday` for its
shared header and forwards the rest to each month's `MonthView`.

### MonthView

Native's `MonthView` supports `title`, `weekdays`, `weekday`, `grid`, `week`, `day`,
`dayBadge`, `dayBadgeText`, `rangeBand`, `more`, and `morePopover`.

| Slot          | Element                                           |
| ------------- | ------------------------------------------------- |
| `title`       | The "Month yyyy" heading                          |
| `weekdays`    | The weekday header row (grid container)           |
| `weekday`     | Each weekday label                                |
| `grid`        | The month grid container                          |
| `week`        | Each week row                                     |
| `day`         | Each day cell (picker button or events cell)      |
| `dayBadge`    | The date badge/circle inside a day                |
| `rangeBand`   | The selection band layer behind a day             |
| `events`      | The event-chips column inside an events-mode cell |
| `chipButton`  | The button wrapping each event chip               |
| `chip`        | The default event chip                            |
| `more`        | The "+N more" overflow row                        |
| `morePopover` | The built-in overflow popover card                |

### TimeGrid (week / day / N-day)

Native's `TimeGrid` supports `header`, `weekNumber`, `columnHeader`,
`columnHeaderWeekday`, `columnHeaderDate`, `columnHeaderDateText`, the `allDay*`
slots, `hourLabel`, `gridLines`, `businessHours`, `backgroundEvent`, `weekendShade`, `daySeparator`,
`event`, `nowIndicator`, and `createGhost`.

| Slot                  | Element                                   |
| --------------------- | ----------------------------------------- |
| `header`              | The column-header row                     |
| `columnHeader`        | Each day's header button (`data-today`)   |
| `columnHeaderWeekday` | The weekday label in a header             |
| `columnHeaderDate`    | The date badge in a header (`data-today`) |
| `allDayLane`          | The all-day row                           |
| `allDayLabel`         | The "all-day" gutter label                |
| `allDayColumn`        | Each day's all-day column                 |
| `allDayEvent`         | An all-day event button                   |
| `hourGutter`          | The hour-axis column                      |
| `hourLabel`           | Each hour label                           |
| `dayColumn`           | Each day column (`data-today`)            |
| `gridLines`           | The hour/slot grid-line overlay           |
| `businessHours`       | The closed-hours shade                    |
| `backgroundEvent`     | A `display: "background"` event's band    |
| `event`               | A timed-event wrapper (`data-dragging`)   |
| `eventBox`            | The default event box                     |
| `nowIndicator`        | The current-time line                     |
| `createGhost`         | The drag-to-create preview                |

### Agenda (schedule)

Native's `Agenda` supports `dayHeader`, `eventRow`, and `empty`.

| Slot        | Element                        |
| ----------- | ------------------------------ |
| `dayHeader` | Each day's header              |
| `eventRow`  | The button wrapping each event |
| `event`     | The default event card         |
| `empty`     | The "No events" placeholder    |

### MonthList (scrolling picker)

`weekdays` / `weekday` style the shared header; every `MonthView` slot above is
forwarded to each rendered month.

## Combining with the theme

Slots and the [theme](/guides/theming) compose. Reach for the theme to recolour the
whole calendar in one place; reach for slot classes when you want Tailwind (or your
design system) to own a specific part. A common setup: theme for palette, `classNames`
for typography and state variants.