12
How to Build a React Page Builder: Puck and Tailwind v4.0
(programming.dev)
There's a big caveat to Tailwind: It generates styles at build time.
So if you try styling your elements with dynamic classes like bg-${color}, it just won't work, you need to write out the full class name for Tailwind to pick it up.
That's fine for a lot of apps, but it becomes a real challenge when you're building things like visual editors, customizable dashboards, or anything that needs dynamic, interactive styling.
The good news is that you can still make it work if you understand how Tailwind works under the hood.
That's why I wrote this blog post, where I show how to:
- Understand how Tailwind generates styles
- Mix inline styles with utility classes
- Use safelisting in v4.0
- Apply all this for visual editors like Puck
Just a quick heads-up since writing this, Tailwind 4.1 was released which introduced a new way to safelist classes using brace expansion. It works pretty much the same as what I show in the blog, but instead of using a .txt file, you can do it inline directly in the
@sourcedirective.Both approaches are totally valid depending on what you need.
You can check it out here: https://tailwindcss.com/blog/tailwindcss-v4-1#safelist-specific-utilities-with-source-inline