Next.js Discord

Discord Forum

using Next with Tailwind and Shadcn

Unanswered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Broad-snouted CaimanOP
Hello everyone,

I'm trying to use Next with Tailwind and Shadcn. The problem is that after I installed next with tailwind it worked, but as soon as I installed shadcn i keep getting issues and tailwind does not work anymore. Did anyone else encounter this problem so far? Thank you.

45 Replies

Original message was deleted
Broad-snouted CaimanOP
Yes I do and it's already in .ts, appreciate it tho.
@Lilac Make sure you set it up correctly while using the shadcn cli, you can have a look at the `components.json` file here in one of my repos for example https://github.com/arnvgh/www/blob/main/components.json
Broad-snouted CaimanOP
Yep my components.json looks almost identical to the project link you've sent:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
Broad-snouted CaimanOP
So, to clarify my question further:

Tailwind works on my main (index) page, but it doesnt work on /game page
This is my tailwind.config.ts file:
Broad-snouted CaimanOP
Ok I figured it out. The problem was my globals.css wasn't imported in my ./src/pages/ folder. So to resolve it I've created ./src/pages/_app.js file which looks like:
import '../app/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

My bad, coming from Gatsbyjs didn't expect this
But shadcn doesn't fully work now so I'm tryna figure that out.
Havana
I have made a project like that yesterday and didn't face your error but this error #Not Found 404?
@Broad-snouted Caiman Ok I figured it out. The problem was my `globals.css` wasn't imported in my `./src/pages/` folder. So to resolve it I've created `./src/pages/_app.js` file which looks like: import '../app/globals.css'; export default function App({ Component, pageProps }) { return <Component {...pageProps} />; } My bad, coming from Gatsbyjs didn't expect this
Lilac
If you are using the new app router, you are supposed to import global.css there and provide that path in your components.json folder, also shadcn does some edits (declare some variables) in globals css, so take care of that too. Or you might provide a minimum reproducible repo so I can help further.
I am encountering an error due to shadcn installation too
everything was working fine initially and the next day i woke i found this👇
i tried uninstalling node_modules, .next folder still couldn't solve it

does anyone else have the same error while using shadcn and next.js 14?
following the app router folder structure too
can someone help pls
Sloth bear
@lushna Show your tailwind.config.ts
Also show your next.config.js
And layout.tsx
@Sloth bear <@854655691901108244> Show your tailwind.config.ts
tailwind.config.ts
@Sloth bear Also show your next.config.js
next.config.js
@Sloth bear And layout.tsx
layout.tsx
Sloth bear
@lushna and show globals.css
American Crow
@lushna your path alias @resolves to C:\ which is most likely not where your project lives. Check tsconfig and adjust the path alias
@Sloth bear <@854655691901108244> and show globals.css
globals.css
Sloth bear
This is weird just add your code at github i will test it myself if you want
Sloth bear
@lushna I'm confused what is not working?
It's working fine
@Sloth bear <@854655691901108244> I'm confused what is not working?
i am getting this when i am running it
Sloth bear
why is it not working for me then 😦
Sloth bear
Skill issue
Nah jk haha
Idk let me see
Sloth bear
I did test it without clerk btw
Cuz i have to login get key etc etc to much effort
clerk wont matter here ig
@Sloth bear Click to see attachment
i am not able to even see this page
Sloth bear
Try to remove clerk
issue with path
Sloth bear
Just like i did
ok i'll try