I upgraded a Rails app using Postcss to Tailwind v4 last week and it took several hours, so I thought I'd share my notes… hybrd.co/posts/upgrad... - ThreadSky

jeremysmith.co • 18 days ago

I upgraded a Rails app using Postcss to Tailwind v4 last week and it took several hours, so I thought I'd share my notes…
https://hybrd.co/posts/upgrading-a-rails-app-to-tailwind-v4

Comments

ayaz-abdulcader.com•18 days ago

@axelbriche.bsky.social @phanremy.bsky.social Time to upgrade TPK's Tailwind version to V4 🥸

axelbriche.bsky.social•18 days ago

This new version is brilliant. I think it's the most important since the release of Tailwind. There are so many new cool features in a single update.

I love native css, but nothing lets you go as fast as Tailwind when you want to prototype or rapidly evolve a project.

janko.io•18 days ago

We’re still on Bootstrap 3 ✋ It sucks big time, but I’m afraid upgrading will break UI.

So, I added Tailwind on top. We’re about to upgrade to v4, but we have Sass files, which the Vite plugin doesn’t support.

Maybe I could get away with the PostCSS plugin, but was hoping to get rid of PostCSS.

jeremysmith.co•18 days ago

Yeah, I think Bootstrap 4 was probably too far a distance for many teams to justify the cost, particularly if you'd built out a lot of custom CSS using/extending Bootstrap 3.

jeremysmith.co•18 days ago

I'm assuming you have two CSS builds, one for Bootstrap and one for Tailwind. Are the Sass files part of the Tailwind build? I found the major reason I was still using Sass was for nesting, which should be supported with Tailwind. https://tailwindcss.com/docs/compatibility#nesting

janko.io•18 days ago

We actually aren’t using Sass for Bootstrap, but for custom styles. And we have a single CSS entrypoint, which imports Tailwind and the top Sass file, and it just automagically works.

I also don’t think we need Sass now that CSS has properties and nesting, but not sure how to easily convert it.

jeremysmith.co•18 days ago

Oh interesting! I assume you must be using a global prefix on Tailwind class names to avoid collisions?

Yeah, I haven't had to convert a lot of custom Sass, just small amounts. Usually I'm just completely replacing it for Tailwind. Straddling the two sounds really challenging!

janko.io•18 days ago

We don’t actually, because the only class collisions I found were generating same CSS rules (e.g. “hidden”).

We did need to sandwich Bootstrap styles between Tailwind preflight and utilties for desired specificity. Occasionally I still need to “!” a Tailwind utility, but mostly it works fine.

sebastiandeutsch.bsky.social•10 days ago

Are you using importmaps or vite/esbuilt?

jeremysmith.co•10 days ago

I'm using esbuild in most projects.

sebastiandeutsch.bsky.social•10 days ago

I'm trying to do importmap only. But it's really hard. Especially when you need some js at build time.

jeremysmith.co•10 days ago

I've only worked on one Rails project using importmaps, but haven't dug too deeply into myself. So far, it's just not been a big enough benefit to me to be worth the apparent trickiness (at least, from what I've gathered).

onurozer.me•7 days ago

Super helpful post! Is there a reason why you used @tailwindcss/cli package instead of the tailwindcss-rails gem? I'm tempted to replace cssbundling with tailwindcss-rails, but wondering if I'm missing something.

jeremysmith.co•7 days ago

Hey, thanks Onur! I think lots of Rails folks prefer tailwindcss-rails, but after many years of using gem wrappers for JS and CSS libs, I'd prefer to manage frontend dependencies closer to how the broader frontend community manages them.

onurozer.me•7 days ago

Fair point, especially if you're already using node 👍

Comments

Posting Rules

Reply