NexJS Tailwind not loading styles after cloning a github repository

Question

So I'm following a React NextJS tutorial and everything was fine yesterday, but today I had trouble accessing Sanity backend. After Googling the solution was to comment out tailwindcss: {}, in postcss.config.js. But then all the styles in the app stopped working, even if I un-commented tailwindcss: {},

Remembering that everything worked last time I pushed to GitHub yesterday I cloned the repo but the issue persists.

Then I started the tutorial from scratch, and both Tailwind and Sanity were working perfectly and they still are. But I was trying to figure out what stops my original app from working.

Been bashing my head for hours now and still can't come up with a solution. I even pushed the now working app, cloned it again, and the clone doesn't work while the original of the clone still works. I ran both npm i --legacy-peer-deps and Tailwinds installation

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The npx command told me that tailwind.config.js and postcss.config.js already exist. So I tried cloning the repo, deleting tailwind.config.js, postcss.config,js, and package-lock.json. Also ran uninstall command for Tailwind. And then again ran npm i and Tailwinds installation. But it still doesn't work.

Here's the repo - https://github.com/RUSHWAYC/tikdok-test.git

Here's how it looks like:

Here's how it should look like:

Am I missing anything? Any commands that I should be running in the terminal? Any help would be appreciated.

Answer 1

Steps you can follow to fix this issue:

1. Uncomment tailwindcss: {} from postcss.config.js , then re-run your development server.
2. Completely remove everything, start from scratch , then only copy/import files you need from the started repository.

Answer 2

After hours of fewer induced hallucinations I figured it out. So I found a way on how to fix the Tailwind styles not applying.

• Clone the last push to GitHub
• Delete tailwind.config.js | postcss.config.js | package.json | package-lock.json
• Remake tailwind files and package.json (or in my case copy them from the dude whose project I'm copying)
• npm i --legacy-peer-deps
• cd backend (to go to Sanity backend folder)
• npm i --legacy-peer-deps
• cd..
• Don't forget to comment out tailwindcss: {}, in postcss.config.js as it messes up Sanity
• npm run dev

So it works now and shows Tailwind CSS applied to the project.

But then, if you git add. there are these errors:

warning: in the working copy of 'package.json', CRLF will be replaced by LF the next time Git touches it

warning: in the working copy of 'postcss.config.js', CRLF will be replaced by LF the next time Git touches it

warning: in the working copy of 'tailwind.config.js', CRLF will be replaced by LF the next time Git touches it

So git reset that.

Found this useful post about the first error. - Git replacing LF with CRLF Basically, it's something dumb that I'm even dumber to understand. But at the end of the post, they linked this answered question here about git add --renormalize. that fixes the issue - Git: how to renormalize line endings in all files in all revisions?

So after doing all the steps above and writing some code, one should run:

• git add --renormalize. and then git commit -m "Message." There should be no errors like previously this time, and every time you git commit next there shouldn't be any issues (unless you edit the files in question).

I also changed the config autocrlf settings to input from true after reading the first article I linked. Not sure if I should, but I did and the article I followed on how to do it can be found here - How to change line-ending settings