c15t/docs/shared/react/styling/tailwind.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Tailwind
description: Reference page for tailwind.
group: reference
---
c15t works with Tailwind CSS out of the box. Use the `slots` theme option to apply Tailwind utility classes to any component part.

## Setup

Import the standard c15t stylesheet once in your app-level CSS entrypoint:

```css
/* React: src/index.css */
@import "@c15t/react/styles.css";

/* Next.js: app/globals.css */
@import "@c15t/nextjs/styles.css";
```

Keeping the c15t stylesheet in your global CSS entrypoint makes layer and cascade order explicit. JS/TSX side-effect imports can load in a different order across framework and Tailwind tooling, which makes style regressions harder to debug.

With Tailwind v4, keep c15t at the end of the top-level `@import` block so Fumadocs, `tw-animate-css`, and other preset imports do not override c15t theme tokens.

### Tailwind v4

Tailwind v4 automatically scans your source files. Import Tailwind normally, then keep the c15t stylesheet last in the top-level `@import` block so Fumadocs, `tw-animate-css`, or other preset styles load first. c15t component styles join Tailwind's `components` layer automatically, so no extra c15t-specific layer declaration is needed:

```css title="src/index.css"
@import "tailwindcss";
@import "tw-animate-css";
@import "@c15t/react/styles.css";
```

```css title="app/globals.css"
@import "tailwindcss";
@import "tw-animate-css";
@import "@c15t/nextjs/styles.css";
```

### Tailwind v3

Import the Tailwind 3-compatible c15t stylesheet after `@tailwind components;` and before `@tailwind utilities;`:

```css title="src/index.css"
@tailwind base;
@tailwind components;
@import "@c15t/react/styles.tw3.css";
@tailwind utilities;
```

```css title="app/globals.css"
@tailwind base;
@tailwind components;
@import "@c15t/nextjs/styles.tw3.css";
@tailwind utilities;
```

## Dark Mode with Tailwind

Combine Tailwind's dark mode with c15t's `dark` tokens:

```tsx
const theme = {
  colors: {
    primary: '#6366f1',
    surface: '#ffffff',
    text: '#1f2937',
  },
  dark: {
    primary: '#818cf8',
    surface: '#1f2937',
    text: '#f9fafb',
  },
  slots: {
    consentBannerCard: 'bg-white dark:bg-gray-900 shadow-lg dark:shadow-gray-900/30',
    consentBannerTitle: 'text-gray-900 dark:text-gray-100',
  },
} satisfies Theme;
```

## Optional: noStyle Mode

If you want Tailwind to own all layout and visual styling, use `noStyle: true`.

> ℹ️ **Info:**
> When using noStyle: true with Tailwind, you're responsible for all layout and visual styling. Start with slots first, then switch to noStyle only when you need full control.

For full custom markup (not just styles), see [Headless Mode](../headless).