Moving Petal Components to Tailwind v4

When Tailwind v4 landed, we had a decision to make. Petal Components is used in a lot of projects, and every one of them would feel a breaking change. But sitting on v3 forever wasn't an option either. So we did the work.

The migration touched every component. v4 changes how configuration works, how the engine resolves classes, and how you theme. Most of it was mechanical, the kind of careful, boring pass that's easy to underestimate and always takes longer than you expect.

The more interesting part was scoping. Every component's styling lives behind a pc- class prefix, so a button carries pc-button, pc-button--primary, and so on. It's a small thing that solves a real problem. Your app's own Tailwind and Petal's styles can share a page without stepping on each other, and when you want to override something, there's a clear, stable hook to target instead of fighting specificity.

Worth being clear on a point people often mix up: the pc- prefix is for CSS classes only. The components themselves are just plain HEEx tags. You still write <.button> and <.modal>, with no prefix. The prefix lives under the hood, where it belongs.

Shipping a big dependency upgrade on behalf of other people is a strange kind of work. Done right, nobody notices. They run mix deps.update, everything still looks correct, and they get on with their day. That silence is the whole goal. It's also why this kind of maintenance rarely gets written about, so consider this one small nod to it.