@bongo/tailwind

@bongo/tailwind builds Tailwind CSS v4 stylesheets for bongo. It reads the class names of each page as bongo renders it, so the stylesheet holds the utilities that your pages use, and no others.

Install

bun add -d @bongo/tailwind tailwindcss

Usage

Add the plugin to bongo.config.ts:

import { tailwind } from '@bongo/tailwind';

export default {
	$site: { url: 'https://example.com/', title: 'My Site', lang: 'en' },
	plugins: [tailwind()],
};

Import Tailwind in a stylesheet, and link it as any other:

@import "tailwindcss";

<bongo:style src="app.css" />

Where the classes come from

Tailwind usually scans your source files for class names. bongo has the HTML of each page, so the plugin uses that instead:

• Pages. Each class name in a class attribute of a rendered page. A class that a template prints in one branch only, such as {{ on ? 'text-red-500' : 'text-blue-500' }}, is in the stylesheet only when a page renders that branch. The words of your text never become utilities.
• Scripts. Each class name in the scripts of the folder of the stylesheet, such as assets/. A script can add a class that no page has yet, such as a class that opens a menu.
• @source. Each file that an @source of the stylesheet names, as in Tailwind.

@import "tailwindcss" source("../src") scans that folder, with all of its files, in place of the scripts of the stylesheet's folder. source(none) scans no folder.

The plugin builds a stylesheet that imports tailwindcss or uses a Tailwind at-rule, such as @theme, @utility, or @apply. It leaves other stylesheets as they are.

A stylesheet that only applies or references utilities, such as a CSS module with @reference "tailwindcss" and @apply, writes no utilities of its own, so it needs no classes of the pages. Thus $assets.classes() can read its class names while a page renders.

Builds and dev

A page that renders a new class name changes the stylesheet in the same build. In bongo build, the stylesheet then gets a new name, so every page that links it renders again, as after a stylesheet edit. bongo dev names a stylesheet by its entry, so no other page renders again.

The pages that a build keeps from the last build keep their class names in the record of the last build, so an incremental build makes the same stylesheet as a fresh build.

bongo dev watches assets/, content/, layouts/, and partials/. A change to a file that only an @source names outside of them shows after the next change that bongo sees.

Files in url()

Tailwind puts each stylesheet that you @import into one file. The plugin keeps the path of each url() relative to the stylesheet that bongo builds, so fonts and images in packages, such as @fontsource, work. See Files in url().