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.
45 Replies
@Broad-snouted Caiman 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.
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.jsonOriginal 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
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?
@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?
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
@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?
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
@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
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 aliasSloth 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
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
@American Crow <@854655691901108244> your path alias `@`resolves to `C:\` which is most likely not where your project lives. Check tsconfig and adjust the path alias
the path alias is okay, but i will recheck again