Home
Support Forums

Tailwind classes not getting pulled into deployed project

Support
, , ,
#1

Hi,

I’ve been bashing my head for several hours following many different methods to get my deployed tests to render my tailwind classes but to no avail. I really need a professionals help.

Everything works fine locally but never when I try through netlify. Please help me!

About me and why I need help… I’m a business owner that’s learning web dev on the side to upgrade my website and learn a valuable skill. I’ve got the basics down (html, css, js) I just need/want tailwind now. So I got a course that has been good so far until this point. Now I need help to get over this hump so I can complete it…

#2

There’s a chance that you’ve setup Tailwind to purge CSS when in production. Thus, it might not be able to find the classes you need and purging the entire thing.

However, any concrete guess would require us to see your website’s source code.

#3

Thanks for responding,

I’ve actually restarted this so many times and stopped attempting to purge the css. So it should be deploying with all of Tailwinds css classes in it (that’s my rookie guess).

Because I’ve restarted so many times I ended up just coloring the background (https://github.com/hungry4capital/testing-tailwind-netlify)

#4

Is this the output you’re looking for: https://elated-bhaskara-b57a1f.netlify.app?

#5

Yes! What did you do to get it to work?

#6

For the sake of testing, I had uploaded a manual build (I build locally and drag-n-dropped the folder). I’ll try building it from Git once and let you know if any additional config is needed.

#7

Well, I could deploy it from Git without any issues too: https://dreamy-tesla-56621a.netlify.app

Repo: GitHub - Hrishikesh-K/TailwindTest

Build settings:

image
image1468×976 61.5 KB

#8

Jeez… so there’s nothing wrong with my files? Thank you, at least I know it’s not my files… Works for you but doesn’t work for me… any ideas why this might be happening?

#9

Are your settings and repo same as what I’ve currently? If yes, could you link to thr website that’s causing problems?

#10

I’ve tried it again and this time built and served it locally… It’s actually not working. Thank you for taking the time to look into it but it seems it isn’t a Netlify issue. Perhaps I have an issue in my VSCode that I can’t see… I checked both your settings and they match with mine. I have zero clue what’s going on…

#11

I also see that in your repo you don’t have the package-lock.json file that I have in my vscode… inside of it I have something called @fullname/postcss-purgecss… could this be causing the problem?

#12

It’s unlikely that it could be a problem, but I always keep the lock-file out of my repo.

#13

Ok, thank you very much for your help sir. I really appreciate it

#14

Hi Hrishikesh,

Could you take a look at something? I’ve got it to work in my local build by enabling purge to true. But still when I deploy to Netlify, I see the css files still show the @ tailwind directives in the css file. Could this have something to do with environment variables not building? I haven’t set any with the understanding that vite has these working under the hood…

#15

Here’s the depo link https://github.com/hungry4capital/beginner-tailwind. Working with the first folder

#16

I’m able to get it online again: https://pensive-mestorf-cb1d50.netlify.app/

Are you sure you’re setting the publish folder as dist?

#17

I got it to work… dumbest, most confusing thing ever and probably the dumbest rookie move ever. I took all the files out, deleting the folder it was in and pasted the files in the parent folder and voila… tailwind classes were imported and converted to css. I spent 4 days of bashing my head just to figure that out. Thanks man, if I hadn’t forked your repo copy of my repy, I would have never figured it out.

Jay

#18

Yea I got it figured out. Thanks for all your help