Custom CSS

Holocron includes Tailwind CSS automatically. You can add your own styles on top, but there is one important rule.

Do not import Tailwind again

Holocron already adds @import 'tailwindcss' internally. If your CSS also imports it, you get duplicate style layers that break layout and cascade order.

Instead, use @reference:

123456789101112/* src/globals.css */
@reference "tailwindcss";

:root {
  --primary: #e11d48;
  --background: #fafafa;

  @variant dark {
    --background: #0a0a0a;
    --primary: #fb7185;
  }
}

@reference gives you access to Tailwind's theme variables, @apply, and @variant without emitting duplicate styles.

How to load your CSS

Default Holocron site

Create global.css or style.css at your project root. Holocron auto-detects the first matching file and imports it after its own styles.

1234my-docs/
├── docs.json
├── global.css
└── index.mdx

With custom entry and another filename

If you use a custom entry and your CSS file is not root global.css or style.css, import it in your server file:

12// src/server.tsx
import './globals.css'

Dark mode overrides

Use @variant dark inside your CSS instead of Tailwind's dark: utility classes:

123456789:root {
  --card: #ffffff;
  --card-foreground: #0a0a0a;

  @variant dark {
    --card: #1a1a1a;
    --card-foreground: #fafafa;
  }
}

This keeps dark mode values colocated with their light mode counterparts in CSS variables.

Responsive overrides

You can also change variables by breakpoint:

1234567:root {
  --bleed: 16px;

  @variant lg {
    --bleed: 32px;
  }
}

Ask AI about this page