using Next with Tailwind and Shadcn
Unanswered
Broad-snouted Caiman posted this in #help-forum
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.
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.
48 Replies
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
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.jsonBroad-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"
}
}
Broad-snouted CaimanOP
So, to clarify my question further:
Tailwind works on my main (index) page, but it doesnt work on
Tailwind works on my main (index) page, but it doesnt work on
/game
pageThis is my
tailwind.config.ts
file:Broad-snouted CaimanOP
Ok I figured it out. The problem was my
My bad, coming from Gatsbyjs didn't expect this
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?
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.
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.tsxIf you want to use
app router
, remove the pages folder and import globals.css
in your root layout.tsx
lushna
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?
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
lushna
can someone help pls
Sloth bear
@lushna Show your tailwind.config.ts
Also show your next.config.js
And layout.tsx
Georgian Shepherd
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
lushna
tailwind.config.ts
next.config.js
layout.tsx
lushna
i can't find where this components.json file is being imported in any other file
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 aliaslushna
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
lushna
i am getting this when i am running it
Sloth bear
lushna
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
lushna
clerk wont matter here ig
i am not able to even see this page
Sloth bear
Try to remove clerk
lushna
issue with path
Sloth bear
Just like i did
lushna
ok i'll try
the path alias is okay, but i will recheck again