---
title: Tailwind CSS
description: Use Tailwind CSS utility classes to style consent components via the slot system.
---
<import src="../../../shared/react/styling/tailwind.mdx#intro-and-setup" />

## Troubleshooting: Fumadocs Overrides c15t Styles

If c15t components render partially unstyled or lose their theme tokens inside a Fumadocs site, check the order of the imports in `app/globals.css`.

**Cause:** Fumadocs preset imports can load after c15t and override the tokens and layer output that c15t components depend on.

**Fix:** Keep `@c15t/nextjs/styles.css` at the end of the top-level `@import` block:

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

If you use other preset or docs-site stylesheets, apply the same rule: load them first, then import c15t last in the top-level import block.

## Using Tailwind with Slots

Apply Tailwind classes via the theme's `slots` object:

```tsx
import { type ReactNode } from 'react';
import { type Theme, ConsentManagerProvider } from '@c15t/nextjs';

const theme = {
  slots: {
    consentBanner: 'fixed bottom-0 inset-x-0 z-50',
    consentBannerCard: 'mx-auto max-w-2xl rounded-t-2xl bg-white p-6 shadow-2xl',
    consentBannerTitle: 'text-lg font-semibold text-gray-900',
    consentBannerDescription: 'mt-2 text-sm text-gray-600',
    consentBannerFooter: 'mt-4 flex flex-wrap gap-3',
    buttonPrimary: 'rounded-full bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-indigo-700',
    buttonSecondary: 'rounded-full border border-gray-300 px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
    toggle: 'data-[state=checked]:bg-indigo-600',
  },
} satisfies Theme;

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{ theme, mode: 'hosted', backendURL: '/api/c15t' }}>
      {children}
    </ConsentManagerProvider>
  );
}
```

<import src="../../../shared/react/styling/tailwind.mdx#dark-mode-to-nostyle" />