Docs: Added a How To guide for working with ShadCN

[ahaywood]

Recently, someone within the Discord forums asked how to get ShadCN working with Redwood. Since Redwood uses yarn workspaces the installation process isn't as straightforward as simply following ShadCN's documentation. However, since it's all React, it's mostly a matter mapping files and folders so ShadCN knows where to place its files.

[Josh-Walker-GM]

Nice! One minor comment but otherwise awesome. I walked through the instructions and it was clear and went smoothly for me.

[Josh-Walker-GM]

We omit the default contents of the vite.config.js here. I think it's obvious enough that this plugin should be in addition to the existing redwood one. Do you think it would be more or less confusing to alter this code block to include the default contents?

[ahaywood]

Good question! ... I can add the default contents

[nathanmacfarlane]

@ahaywood I believe this tw- should be removed from this PR. Took me a bit to track down why the tailwind styles weren't being applied specifically on components imported from shadcn but finally realized it's because all of the class names were prefixed with tw- which were being completely ignored.

[twoflyingforks]

Thanks @nathanmacfarlane for helping to find this - would have probably been running around in circles if not for this. Was very puzzled by the issues I was facing too, and upon trying out on a fresh repo the instructions at the separate PR for shadcn's page (which correctly omitted the tw- prefix, but left out the tsconfigpaths plugin), came to the same conclusion that it was due to this. (Truly being misled by the documentation on shadcn's page...)

E.g. classNames were ending up as:

className={cn("tw-fixed tw-inset-0 tw-z-50 tw-bg-black/80 tw- data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0",className)

Leaving it as "prefix": "" fixes it.

Just in case someone else stumbles upon this issue too, I also had to delete all shadcn components that had been earlier yarn shad <insert component> to reset the problematic classNames.

[shansmith01]

Great tutorial. I managed to get everything working except that tests are failing when importing anything with the @ alias. eg
import { cn } from '@/lib/utils'

eg. error is " Cannot find module '@/components/Button/Button' from 'web/src/components/Calendar/Calendar.tsx'

If I swap out @ for src everything works fine

This can be replicated in the example repo in the docs

Does anyone have any ideas on getting that working?

[twoflyingforks]

Great tutorial. I managed to get everything working except that tests are failing when importing anything with the @ alias. eg import { cn } from '@/lib/utils'

eg. error is " Cannot find module '@/components/Button/Button' from 'web/src/components/Calendar/Calendar.tsx'

If I swap out @ for src everything works fine

This can be replicated in the example repo in the docs

Does anyone have any ideas on getting that working?

In tsconfig.json, under "compilerOptions" > "paths", I have the following (see the specific line which was added). Hope it helps!

"compilerOptions": {
   "paths": {
     ...
     "@/*": ["./src/*"]

[twoflyingforks]

Just noticed a minor typo error here in that the rsc and tsx parameters should be placed outside the tailwind section, instead of within.