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.

Tailwind v4

Tailwind v4 automatically scans your source files. Import Tailwind normally, then place the c15t stylesheet immediately after it. c15t component styles join Tailwind's components layer automatically, so no extra c15t-specific layer declaration is needed:

@import 'tailwindcss';
@import '@c15t/react/styles.css';

@import 'tailwindcss';
@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;

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.