Typography

For long-form content like articles, member communications or documentation, use the prose styles for consistent formatting. They extend the official @tailwindcss/typography plugin and are coloured with the Country Club design tokens, so they invert in dark mode automatically.

1. Install the plugin

Add the official Tailwind CSS Typography plugin:

pnpm add -D @tailwindcss/typography

2. Add the prose styles

Create a typography.css file that maps the prose variables onto the kit's tokens. Because the tokens already invert in dark mode, one definition covers both themes:

/* app/typography.css — extends @tailwindcss/typography */
.prose {
  --tw-prose-body: var(--muted-foreground);
  --tw-prose-headings: var(--foreground);
  --tw-prose-links: var(--foreground);
  --tw-prose-bold: var(--foreground);
  --tw-prose-bullets: var(--border);
  --tw-prose-hr: var(--border);
  --tw-prose-quotes: var(--foreground);
  --tw-prose-quote-borders: var(--primary);
  --tw-prose-captions: var(--muted-foreground);
  --tw-prose-code: var(--foreground);
  --tw-prose-pre-code: var(--card-foreground);
  --tw-prose-pre-bg: var(--card);
  --tw-prose-th-borders: var(--border);
  --tw-prose-td-borders: var(--border);
}

/* Display headings use Fraunces (serif). */
.prose :is(h1, h2, h3, h4) {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Inline code: a soft chip from our tokens. */
.prose :not(pre) > code {
  border-radius: 0.375rem;
  background: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 0.125rem 0.375rem;
  font-weight: 500;
}
.prose :not(pre) > code::before,
.prose :not(pre) > code::after {
  content: "";
}

3. Register the plugin and styles

In your global stylesheet, register the plugin and import the prose styles after the design system:

/* app/globals.css */
@import "tailwindcss";
@import "@countryclub/ui-react/styles.css";
@import "./typography.css";

@plugin "@tailwindcss/typography";

4. Use the prose class

Add the prose class to any container of rich content:

<div className="prose">
  <h1>Heading level 1</h1>
  <p>The Spring Invitational returns to the East Course this May.</p>
  <blockquote>
    <p>There is no better way to know a course than to play it.</p>
  </blockquote>
</div>

Examples

Variations of the prose styles in light and dark mode.

Article

The Spring Invitational returns to the East Course this May — three days of match play, a members' dinner, and the unveiling of the new clubhouse terrace.

About the tournament

Now in its fortieth year, the Invitational pairs members with guests across a handicapped bracket. Tee times begin at dawn; the final fourball reaches the eighteenth by late afternoon.

There is no better way to know a course than to play it when the dew is still on the greens.

— Eleanor Vance, Club Captain

What to bring

Your club handicap card.
Soft spikes — metal spikes are not permitted on the new greens.
A jacket for the members' dinner on Saturday evening.

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Quote

A round of golf is a conversation with the course — and the course always has the last word.

— Eleanor Vance, Club Captain

Inline code

Book a tee time with the Button component, then confirm the slot by calling useAppForm() from the form entry point. Wrap the page in ThemeProvider so light and dark modes follow the member's system preference.