Command is not working with t3 app

[FleetAdmiralJakob]

The command pnpm dlx shadcn-ui init does not work with the t3 app (already included there tailwind)

[ap-1]

pnpm create t3-app@latest # tailwind selected
cd my-t3-app
pnpm dlx shadcn-ui init
pnpm run dev

Running the above commands seems to work as expected. Can you elaborate on what doesn't work?

[FleetAdmiralJakob]

Two things:

~~- shadcn/ui not recognizes that T3 uses an src directory~~ fixed because of the new CLI

• and it does not recognize that T3 uses typescript syntax for the tailwind config file

[FleetAdmiralJakob]

And btw.: the tailwind styles are also not working anymore

[shadcn]

@FleetAdmiralJakob We're working on adding out of the box support for t3. For now, it requires manual installation. I'll see if I can find an example repo and share.

[shadcn]

@FleetAdmiralJakob Here's an example repo from @juliusmarminge https://github.com/juliusmarminge/t3-complete

[FleetAdmiralJakob]

@FleetAdmiralJakob Here's an example repo from @juliusmarminge juliusmarminge/t3-complete

Great! Copied the code from that and it worked.

@FleetAdmiralJakob We're working on adding out of the box support for t3. For now, it requires manual installation. I'll see if I can find an example repo and share.

Cool, I think that would be a really cool addition, especially if I'm right and the problems are general problems (.ts and src directory)

[FleetAdmiralJakob]

It seems that most of the issues have been resolved with the new CLI. However, there is still some JavaScript code being written in the tailwind TS config file. While it may be functional, it is not optimal.

[FleetAdmiralJakob]

Any updates on this?

[xih]

I'm running into a similar issue as well

@FleetAdmiralJakob which new CLI are you using to fix this problem?

[FleetAdmiralJakob]

@xih

Just the new CLI from shadcn/ui.

But for the TS Problem there is no fix, so I'm using the tailwind configuration file from t3-complete

[xih]

@FleetAdmiralJakob

Ok gotcha. I'm running the create-t3-app CLI and running the CLI through this npx shadcn-ui@latest init and breaking CSS.

Your approach seems better - are you manually adding in next-auth and TRPC over?

[FleetAdmiralJakob]

What do you mean? If I want to use tRPC I use the version from T3. So I'm running the T3 CLI then the shadcn/ui CLI and then replacing the tailwind config with the one from t3-complete (you can leave out the last step)

[xih]

Here are the steps I'm running to get to that result:

1. npx create-t3-app@latest
2. npx shadcn-ui@latest init
3. Copy tailwind.config.ts from https://github.com/juliusmarminge/t3-complete/blob/main/tailwind.config.ts and paste that in the new tailwind config file in
4. change components.json to reflect the typescript config file instead of the javascript one

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Still getting the same styling errors though.

Which one is the last step?

[FleetAdmiralJakob]

Hi @xih,

I created an example repo for you:

https://github.com/FleetAdmiralJakob/t3-with-app-router-with-shadcn

I created my own tailwind config because I recognized that the one from t3-complete is outdated. My config is type-safe and updated.

You can view the Vercel build with the link on GitHub.

In the README, you can see my CLI steps

[xih]

Hey @FleetAdmiralJakob !

thank you - I got it working!

can you help me understand what was the problem? I'd love to expand my mental model on what went wrong.

Cheers

[FleetAdmiralJakob]

Based on what you've shared with me, it seems that the issue was because the configuration of t3-complete was outdated. Alternatively, you could have used the configuration from shadcn/ui, even though it's a Typescript file, as the config is valid JavaScript.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.