Style component instances

Use class to style the root of any Ghostcn component. Use a named styling parameter for an element inside it: buttonClass for theme-owned buttons, for example, or cardClass for nested cards in a pricing table. A Post Card is already a card, so use class for its root.

Tailwind CSSCopy Anchor Link

These two calls share a partial but style their own instances:

{{> "components/pricing-table"
    class="mx-auto my-12 w-full max-w-4xl"
    gridClass="gap-6"
    cardClass="rounded-2xl bg-card text-card-foreground p-8 shadow-lg"
    buttonClass="bg-purple-600 text-white hover:bg-purple-700"
}}

{{> "components/pricing-table"
    class="mx-auto max-w-6xl"
    cardClass="rounded-lg p-4 shadow-none"
    buttonClass="bg-emerald-700 text-white hover:bg-emerald-800"
}}

Use complete, literal utility names in scanned .hbs files. Tailwind won’t detect fragments such as bg-{{color}}-600; runtime-provided classes must also appear in scanned source or be safelisted. Keep the CSS watcher running while you edit.

Custom colors in dark modeCopy Anchor Link

Semantic pairs such as bg-card text-card-foreground follow the theme’s color scheme. A custom background does not automatically choose a readable text color. Pair background and foreground in each scheme:

{{> "components/pricing-table"
    cardClass="rounded-2xl bg-purple-50 text-purple-950 dark:bg-purple-950 dark:text-purple-50 p-8"
}}

Pricing card text inherits its local foreground. For individual overrides, see the Pricing Table styling parameters. Check contrast in each color mode.

Vanilla CSSCopy Anchor Link

Pass your own class names:

{{> "components/pricing-table"
    class="membership"
    cardClass="membership-card"
    buttonClass="membership-button"
}}

.membership {
  max-width: 56rem;
  margin: 3rem auto;
}

.membership .membership-card {
  padding: 2rem;
  border-radius: 1rem;
  background: var(--card);
  color: var(--card-foreground);
}

.membership .membership-button {
  background: #7e22ce;
  color: white;
}

In a generated theme, put those rules in assets/css/source.css. In an existing theme, load your overrides after the managed Ghostcn styles. Match the default selector specificity where necessary.

Target a single actionCopy Anchor Link

buttonClass applies to all theme-owned buttons in that instance. For one action, scope a selector under your instance class:

.membership [data-portal$="/monthly"] {
  background: #7e22ce;
  color: white;
}

Keep your changesCopy Anchor Link

Call-site classes and theme-owned CSS sit outside the copied component files. An npm update does not change those files; a deliberate re-add can replace the copied partial and CSS. Older partials may need a reviewed update before they accept styling parameters.

Slots only apply to elements the component actually renders. They don’t change Ghost’s access rules, membership settings, or the UI inside Ghost-owned Portal, search, and comments.