Next.js Discord

Discord Forum

using Next with Tailwind and Shadcn

Unanswered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Avatar
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
Avatar
Broad-snouted CaimanOP
Yes I do and it's already in .ts, appreciate it tho.
Avatar
@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
Avatar
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"
  }
}
Avatar
Broad-snouted CaimanOP
So, to clarify my question further:

Tailwind works on my main (index) page, but it doesnt work on /game page
Image
This is my tailwind.config.ts file:
Image
Avatar
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.
Avatar
Havana
I have made a project like that yesterday and didn't face your error but this error #Not Found 404?
Avatar
@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
Avatar
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.
Avatar
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?
Image
Avatar
can someone help pls
Avatar
Sloth bear
@lushna Show your tailwind.config.ts
Also show your next.config.js
And layout.tsx
Image
Avatar
@Sloth bear Also show your next.config.js
Avatar
next.config.js
Image
Avatar
@Sloth bear And layout.tsx
Avatar
layout.tsx
Image
Avatar
Sloth bear
@lushna and show globals.css
Avatar
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
Avatar
Sloth bear
This is weird just add your code at github i will test it myself if you want
Avatar
Sloth bear
@lushna I'm confused what is not working?
It's working fine
Avatar
@Sloth bear <@854655691901108244> I'm confused what is not working?
Avatar
i am getting this when i am running it
Image
Avatar
Sloth bear
Image
Avatar
why is it not working for me then 😦
Avatar
Sloth bear
Skill issue
Nah jk haha
Idk let me see
Avatar
Sloth bear
I did test it without clerk btw
Cuz i have to login get key etc etc to much effort
Avatar
clerk wont matter here ig
Avatar
@Sloth bear Click to see attachment
Avatar
i am not able to even see this page
Avatar
Sloth bear
Try to remove clerk
Avatar
issue with path
Avatar
Sloth bear
Just like i did
Image
Avatar
ok i'll try