Problem with tailwindcss/forms
Unanswered
Red-cockaded Woodpecker posted this in #help-forum
Red-cockaded WoodpeckerOP
In my next.js project I use tailwindcss. I used a component from this framework. The problem is that when I display my page, the css is not generated. However I followed the documentation, my tailwing.config file is correct. Do you have a solution?
44 Replies
Show a preview of
âšœï¸
âšœï¸
âšœï¸
tailwind.configâšœï¸
your css fileRed-cockaded WoodpeckerOP
global.css :
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}Red-cockaded WoodpeckerOP
Could the problem be at the tree level of my project? the pages folder containing the files is at the root of the project and in my config this is different
@Red-cockaded Woodpecker Click to see attachment
I think first lines should look like this👇
Try renaming first your
tailwind.config.ts into a different name like TEST or whatever you want and perform again the tailwind initialization command in a terminal pointing to your projet directoryAlso check you have well import
globals.css@Red-cockaded Woodpecker Could the problem be at the tree level of my project? the pages folder containing the files is at the root of the project and in my config this is different
Could you share the repo if possible? I need to check the structure of the entire repo
If unable, could you make a minimal reproduction repository that reproduces the problem?
If unable, could you make a minimal reproduction repository that reproduces the problem?
can you make a "minimal" repo that isn't private 

Red-cockaded WoodpeckerOP
otherwise give me your git hub nicknames and I will add you temporarily
personally, we prefer minimal as we don't need your whole code (unnecessary and waistful when you can give simple)
also don't need to add me as i am not even part of this convo
Red-cockaded WoodpeckerOP
I cloned my repo in public you can watch it
@Red-cockaded Woodpecker https://github.com/Thomas94170/debug
1. If you use tailwind.config.ts I think you’re supposed to follow the esm import/export syntax
2. (Likely the source of the problem) Why do you have pages outside src and app inside src?
2. (Likely the source of the problem) Why do you have pages outside src and app inside src?
Are you trying to use the pages router?
If you want to use the pages router, you need to create pages/_app.tsx and import the css file there as well
Also put pages and app at the same level if you want to use both of them at the same time. (pages and app) or (src/pages and src/app)
Red-cockaded WoodpeckerOP
we agree that the page folder must be located in the src/app folder
No. src/pages
Red-cockaded WoodpeckerOP
I replace app with pages
src/pages not src/app/pages
You are doing src/app/pages which doesn’t work
Red-cockaded WoodpeckerOP
ok
and what is in my pages folder which is in src/app/pages will go directly to src/pages
Yes just move src/app/pages to src/pages
Can you access /dashboard now
Btw since you seem to not use the app router just remove src/app entirely
Red-cockaded WoodpeckerOP
my next project does not want to remove app from my src/app nor rename it
remove src/app and replace wirh src/pages
@Red-cockaded Woodpecker my next project does not want to remove app from my src/app nor rename it
So you do use the app router? Then you can keep it, I thought you don’t need it
But change src/app/pages to src/pages because you are trying to use the pages router and src/app/pages is not gonna work
Red-cockaded WoodpeckerOP
delete or rename app is not possible
I am not telling you to delete or rename app
I’m telling you to move the pages directory from inside app/ to outside it
Red-cockaded WoodpeckerOP
my pages folder must be outside of src/app
Ok idk then, best of luck
Red-cockaded WoodpeckerOP
This is what I did from the start, my page folder was outside of src/app