Tailwindcss randomly not being applied

Answered

European anchovy posted this in #help-forum

European anchovyOP

2023-10-03T09:45:42.000Z

I have no idea what is going on. Please help me. I literally worked on a twitter clone project sunday. This is how it looked like. Today I wanted to continue my work and now the entire UI is broken. I changed nothing in the code... could this be because I had nexjs: latest ? I was on version 13.5.3 before.

Answered by not-milo.tsx

Oh, yeah... You have to add this to your configuration:

 module.exports = {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   // rest of the configuration
 }

View full answer

32 Replies

European anchovyOP

2023-10-03T09:46:30.000Z

the first image is how it looked sunday. and the one on the right is how it looks now...everything is broken...nothing in the code changed. it seems like tailwind classes are randomly not being applied.

not-milo.tsx

2023-10-03T10:12:48.000Z

Are you sure you didn't change anything int the code? Not even a package update of some kind?

European anchovyOP

2023-10-03T10:19:53.000Z

Nextjs did update. Maybe supabase too. Nothing else I think....

I could be a package of some sort because I literally changed nothing...

Also something very weird. I have a component to show the tweets in the middle. I copied all the code from that component and pasted it directly in the home page.tsx. it fixed some things but the top home header was still broken. I REVERTED these changed but it looked the same. So basically it looked like it should on sunday, but the home header was broken and the tweets didnt have the hover effects. So those were broken too.

How can it randomly work then I change the code and rever the changes so basically it's the same, but it looks different

not-milo.tsx

2023-10-03T10:31:01.000Z

Have you tried deleting your .next folder and rebuilding the app from scratch?

European anchovyOP

2023-10-03T10:31:30.000Z

not-milo.tsx

2023-10-03T10:31:52.000Z

This looks like an issue with your content entry for tailwind's configuration, but if you didn't change it then it ight be some kind of weird build artifact...

@European anchovy No

not-milo.tsx

2023-10-03T10:31:59.000Z

Try it

European anchovyOP

2023-10-03T10:32:23.000Z

So do I just delete the .next app and then what ?

I tried delete the node modules and reinstalling and even downgrading to next 13.5.3...no fix

I am afk rn...I will try deleting the .next folder. But I did try to clone the git repo again and it didnt work either....

So it actually makes no sense....

not-milo.tsx

2023-10-03T10:35:41.000Z

After you delete the .next folder run npm run build and npm run start and see if the issue persists. (if you're using pnpm or yarn just remove the run keyword from the commands)

European anchovyOP

2023-10-03T10:35:42.000Z

I deleted the entire dir and cloned the git repo again before leaving from home....and it didnt work

I use npm

not-milo.tsx

2023-10-03T10:36:32.000Z

Ok, if you can please send a screenshot of your tailwind configuration and project structure

European anchovyOP

2023-10-03T10:37:29.000Z

This is my github https://github.com/Compil3-sudo/twitter-clone-supabase

not-milo.tsx

2023-10-03T10:39:48.000Z

Oh, yeah... You have to add this to your configuration:

 module.exports = {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   // rest of the configuration
 }

Answer

European anchovyOP

2023-10-03T10:40:10.000Z

But it worked on sunday....

I will try it asap

Thanks a lot

@European anchovy But it worked on sunday....

not-milo.tsx

2023-10-03T10:41:29.000Z

Maybe you moved your components folder from ./app/components out to ./components...

European anchovyOP

2023-10-03T10:41:54.000Z