[Fix] Add Chakra UI integration

[m3t]

I think @TimKolberger added a wrong argument for the installation of Chakra UI related packages in #3715
Whereas in the Chakra UI docs the packages live in dependencies devDependencies

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	5e36515
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62507dd09f62250009fa201e

[TimKolberger]

Good catch 👍 thanks for updating!

[thedavidprice]

Hi All! I think this one needs to be coordinated with the (herculean) effort happening in #4950

Looping in @Tobbe @nickpdemarco — could you two help plot a way forward here?

Thanks, everyone! Stoked to see Chakra getting a lot of attention.

[nickpdemarco]

Aha! I thought something was up here... https://github.com/redwoodjs/redwood/pull/3715/files#r834573794

AFAIK this is totally fine to go in and won't disrupt #4950. It'll be a trivial merge and then I can treat Mantine the same way; installing to regular dependencies. @Tobbe might see something I don't, so I'll defer to him.

[thedavidprice]

Ah, I just took a look at the code myself. This was actually an intentional choice, but I'm not sure it matters.

@jtoar we decided to install Tailwindcss in devDependencies. We followed that pattern with Chakra, but this is the second time there's been a PR with a suggestion to move to dependencies. It doesn't really matter because our build-step is in a development context (does it)? I just want to be consistent and feel like we should have a rationale either way.

[Tobbe]

99‰ of the time it won't matter if chakra/tw is a dep or devdep in a redwood app. The one time it does matter is if someone were to create an app/a library that uses RW that in turn was going to be installed as a dependency of some other app. In that case chakra and tw might not get installed even though it might be needed.

So I'd say go ahead and switch to installing them all as a proper dependency.

[jtoar]

When I made the setup ui tailwindcss command, I took my cues from Tailwind CSS's docs¹ which say to install it as a devDependency:

I just had a look at Chakra UI's docs and they recommend installing it as a dependency, so removing the -D option seems like the way to go.

@thedavidprice but I don't think we should remove the -D option on setup ui tailwindcss just to be consistent. Like @Tobbe said, I don't think it'd matter in the sense that nothing would break, but we would be including packages that—in Tailwind's case—don't need to be there. Ultimately these are different styling solutions. Tailwind is kind of like a compiler; you build your CSS before you deploy. You don't need Tailwind when you deploy the way you need Chakra since you're literally importing components from it.

I haven't used Chakra a ton yet and am not a Tailwind expert either so I could be misinformed! But right now I do feel like they're separate libraries and deserve separate setup commands.

Footnotes

1. https://tailwindcss.com/docs/installation ↩

[thedavidprice]

This is really helpful and, I suggest, should establish our rationale going forward:

• we do whatever the docs tell us to do

😂

Sound like a plan?

[jtoar]

we do whatever the docs tell us to do

This is the way!

[thedavidprice]

@jtoar thanks again!

@Tobbe @nickpdemarco FYI I'm merging this one now.

@m3t Thank you!

[Tobbe]

@thedavidprice Think you might have been a bit fast on the trigger here 🔫 🤠

Fix over here: #5085

[thedavidprice]

Indeed. Grateful for friends like you watching my back!!