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.

12 Replies

Avatar
Red-necked Grebe
I you're using TypeScript, during shadcn ui setup make sure you specific the tailwind config ending in .ts as shadcn ui defautls to .js
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
Yes I do and it's already in .ts, appreciate it tho.
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
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
Red-necked Grebe
What router are you trying to use? pages router or app router? Because this codeblock resembles pages router, but you also have app dir and a layout.tsx
If you want to use app router, remove the pages folder and import globals.css in your root layout.tsx