Tailwind CSS

Theme stylesheets keep their line layout in a cascade layer named lumis. Tailwind v4 keeps its utilities in layers too, and between two layers the one declared later wins. Declare lumis before importing Tailwind so the utilities come out on top:

@layer lumis;
@import "tailwindcss";

Load a CSS theme file for htmlLinked output. With lumis declared first, utility classes override the line layout without !important. This example wraps long lines and highlights line 2 with a utility class:

htmlLinked({
  language: javascript,
  preClass: 'whitespace-pre-wrap',
  highlightLines: {lines: [2], class: 'bg-yellow-500/20'},
})

A custom highlight class takes the place of l-highlighted, so the theme's highlight color stays out of the way and the utility sets the background. The line spans the full code-block width.

Theme colors are not in the layer. To override one with a utility, add the important modifier, as in bg-slate-900! on the <pre>.