Tailwind CSS

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:

/* 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:

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@c15t/react/styles.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;:

@tailwind base;
@tailwind components;
@import '@c15t/react/styles.tw3.css';
@tailwind utilities;

@tailwind base;
@tailwind components;
@import '@c15t/nextjs/styles.tw3.css';
@tailwind utilities;

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:

@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:

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>
  );
}

Dark Mode with Tailwind

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

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.