@vorge/theme-tailwind

A minimal alternate theme for vorge built on Tailwind CSS v4, composing the headless primitives from @vorge/core/primitives.

This example is here to back the "any styling system" claim with code: the framework's contract is the headless primitives + a layouts map, not the default theme's CSS-variable system.

Use

In your project's vite.config.ts, add the Tailwind Vite plugin and point the vorge plugin at this theme:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import { vorge } from "@vorge/vite";

export default defineConfig(async () => ({
  plugins: [
    tailwindcss(),
    ...(await vorge({
      theme: "@vorge/theme-tailwind",
    })),
  ],
}));

The package exports { layouts } keyed by doc, blank, blog-post, plus a side-effecting CSS import (@import "tailwindcss" + @apply rules for the primitives' inner tree).

Dark mode

Tailwind v4's class-based dark: variant is wired to vorge's data-theme="dark" attribute via:

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

So the framework's <ThemeToggle> flips the attribute, and every dark:* utility class in the layouts (or in your MDX) responds.

What it demonstrates

• Layouts can come from anywhere — they just need to be React components that render children (the page) inside whatever shell you want.
• <Sidebar> and <TOC> from @vorge/core/primitives are fully headless. They emit a tree of <ul>/<li>/<a> elements with fixed class names; style those via @apply chains in theme.css so the JSX stays clean.
• Hooks like useConfig(), usePage(), useThemeConfig() work the same whether your theme is Tailwind, plain CSS, CSS Modules, or anything else.
• No JS Tailwind config — Tailwind v4 is CSS-driven; @import "tailwindcss" is enough.

Pair with @tailwindcss/typography

For prose styling (<main className="prose prose-zinc"> in the doc layout), add the typography plugin to your project's CSS:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

(The example layout file uses prose classes assuming this is loaded by the consumer's project.)