Getting Started

Setup Path A: Vite (recommended)

1composer require marcorieser/tailwind-merge-statamic
2npm install alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus

composer require marcorieser/tailwind-merge-statamic
npm install alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus

 1import Alpine from 'alpinejs';
 2import anchor from '@alpinejs/anchor';
 3import collapse from '@alpinejs/collapse';
 4import focus from '@alpinejs/focus';
 5
 6Alpine.plugin(collapse);
 7Alpine.plugin(anchor);
 8Alpine.plugin(focus);
 9
10window.Alpine = Alpine;
11Alpine.start();

import Alpine from 'alpinejs';
import anchor from '@alpinejs/anchor';
import collapse from '@alpinejs/collapse';
import focus from '@alpinejs/focus';

Alpine.plugin(collapse);
Alpine.plugin(anchor);
Alpine.plugin(focus);

window.Alpine = Alpine;
Alpine.start();

1@import './kern.css';

@import './kern.css';

Setup Path B: CDN

Use this if you are prototyping without a build step. You still need the PHP package for tw_merge in Antlers.

1<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
2<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
3<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
4<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Copy Kern partials and use them directly in Antlers templates. Keep using token-based utility classes so everything stays themeable.

Theming

Kern components read Tailwind theme tokens (for example bg-primary , text-foreground , border-border ). Override the token values in your own @theme block:

1@theme {
2  --color-primary: oklch(0.55 0.24 262);
3  --color-primary-foreground: oklch(0.99 0 0);
4  --color-background: oklch(0.98 0 0);
5  --radius-default: 0.625rem;
6}

@theme {
  --color-primary: oklch(0.55 0.24 262);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-background: oklch(0.98 0 0);
  --radius-default: 0.625rem;
}

Avoid hardcoded color literals in components. Change tokens once, and every component updates.

Typography

Kern ships utility heading classes in kern.css so you can keep semantic tags separate from visual hierarchy.

1<h2 class="h1">Visually large, semantically h2</h2>
2<h3 class="h4">Visually compact section title</h3>

<h2 class="h1">Visually large, semantically h2</h2>
<h3 class="h4">Visually compact section title</h3>

Recommended base-layer pattern for prose-heavy pages:

1@layer base {
2  .docs-prose h1 { @apply h2; }
3  .docs-prose h2 { @apply h3 mt-10; }
4  .docs-prose h3 { @apply h4 mt-8; }
5}

@layer base {
  .docs-prose h1 { @apply h2; }
  .docs-prose h2 { @apply h3 mt-10; }
  .docs-prose h3 { @apply h4 mt-8; }
}