Part 2 — Ripping out Bulma/SCSS for Tailwind CSS v4

After a few months of building on Bulma + hand-rolled SCSS, the styling layer had become the bottleneck — every new component meant writing bespoke CSS instead of composing utilities. This session was the switch to Tailwind CSS v4.

What I did

• Deleted the Bulma dependency and every custom SCSS file (Removed Bulma Custom SCSS).
• Rebuilt assets/css/screen.css on Tailwind v4 via @tailwindcss/postcss — no tailwind.config.js at all; tokens and @source globs live directly in the CSS file, which is the v4 way of doing things.
• Dropped autoprefixer from the PostCSS pipeline since Tailwind v4 emits its own vendor prefixes.
• Re-pointed the gulp css task at the new pipeline: screen.css → PostCSS → cssnano → committed assets/built/screen.css.

What broke / what was tricky

The build pipeline's URL rebasing: it consumes exactly one ../ from any url() reference, so a font path written as ../../fonts/x.woff2 in source comes out as ../fonts/x.woff2 in the built CSS. Get the source path "wrong" on purpose (one level too deep) or fonts 404 in production.

grep -o 'url([^)]*)' assets/built/screen.css

That one-liner became the standard sanity check after touching anything that references a font or asset URL.

When a build pipeline rewrites paths, don't guess the output — grep the built file. It's faster than a failed deploy.