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

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

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"
  }
}

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:

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.

I have made a project like that yesterday and didn't face your error but this error #Not Found 404?

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.

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

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?

components.json is similar to yours

following the app router folder structure too

can someone help pls

@lushna Show your tailwind.config.ts

Also show your next.config.js

And layout.tsx

apparently you're component.json is being imported in a wrong way, you need to define the correct import path wherever you're importing that file

tailwind.config.ts

next.config.js

layout.tsx

i can't find where this components.json file is being imported in any other file

@lushna and show globals.css

@lushna your path alias @resolves to C:\ which is most likely not where your project lives. Check tsconfig and adjust the path alias

globals.css

This is weird just add your code at github i will test it myself if you want

@lushna I'm confused what is not working?

It's working fine

i am getting this when i am running it

why is it not working for me then 😦

Skill issue

Nah jk haha

Idk let me see

I did test it without clerk btw

Cuz i have to login get key etc etc to much effort

clerk wont matter here ig

i am not able to even see this page

Try to remove clerk

issue with path

Just like i did

ok i'll try

the path alias is okay, but i will recheck again