---
title: ClassName Inputs
---

CSS class names can be injected into FullCalendar's DOM in various places via settings like `eventClass`, `toolbarClass`, `dayCellClass`, and many others. They accept a simple string:

```js
eventClass: 'my-event'

eventClass: 'my-event highlighted' // multiple, space-separated
```

## Tailwind

Because class names are plain strings, you can use [Tailwind](https://tailwindcss.com/) utility classes directly — no custom CSS needed:

```js
toolbarClass: 'bg-red-500'

eventClass: 'rounded shadow text-sm'
```

## Conditional Class Names

For conditional class names, use the [clsx](https://www.npmjs.com/package/clsx) utility. Install it:

```bash
npm install clsx
```

Then use it with a function-form setting:

```js
import clsx from 'clsx'

eventClass: (data) => clsx(
  'my-event',
  data.isPast && 'my-event--past',
  data.isSelected && 'my-event--selected',
)
```

This works with Tailwind too:

```js
eventClass: (data) => clsx(
  'rounded shadow',
  data.isPast && 'opacity-50',
)
```