Support Forums

Tailwindcss is not converting @tailwind directives when deployed

** https://lit-spa.netlify.app**

After fighting deploying through Github for hours due to Tailwind directives not being compiled on build in Netlify (builds fine locally), I decided to just use the drag and drop functionality to deploy my build folder. Locally my files build just fine and the tailwind directives are converted to css classes as it should. I figured there is no way it wouldn’t work from manually deploying, but my css is converting back to tailwind directives.

Here is the stylesheet from the build folder I am uploading Lit-SPA-Starter/styles.js at fix-deploy · mabry1985/Lit-SPA-Starter · GitHub as you can see it’s standard css selectors

but when the site is uploaded, the styles are not applied and when I inspect the source files you can see that the file is magically reverted back to the tailwind directives from before it’s processed.

Am I losing my mind? I have no idea what’s going on here…

Ideally I could figure out why the tailwind directives aren’t compiling during the build through Github, but at this point I’d be happy with just being able to drag and drop it over.

Hi @mabrycodes,

I think what you’re seeing is Source Maps: Use a source map - Firefox Developer Tools | MDN.

You can turn that option off in Chrome by going to Dev Tools settings and turning source maps off here:

About your actual problem, could you show how it should actually look?

This is looking to be an issue with the Tailwind JIT compiler somewhere in my pipeline. I don’t think it’s an issue with Netlify, so I can close this issue.