warpig's avatar
Level 12

Tailwind styles not showing in production

Just deployed the repo with Heroku but I can't see any styles from Tailwind being applied, what am I missing here? I got Tailwind through Mix and it works great in local environment, what can I do? This is the list of config vars I have set up: https://imgur.com/GuJGeCz

0 likes
12 replies
tykus's avatar

Did you do a production build whenever you deployed; is the a /css/app.css resource on the production server?

warpig's avatar
Level 12

What do you mean, I pushed the project to git and then cloned it from git to Heroku so technically every file must be in the same place, no?

I checked package.json and I can see "tailwindcss": "^2.0.4" in devDependencies..

tykus's avatar

Technically, yes. If the compiled CSS is in version control.

You can easily check what is happening in your Network tab in the Browser; are you getting a 404?

warpig's avatar
Level 12

Nope, not exactly but now that you mention the Network tab it's not listed either, and what's a "compiled CSS for version control"? Should I have compiled it and then push to git, to finally clone to Heroku??

warpig's avatar
Level 12

@tykus okay yes, not a 404 but yes there is a problem with app.css and app.js, it says "the load has been blocked" this is the literal message:

Mixed active content has been blocked from loading "http://thpsvido.herokuapp.com/css/app.css" 
Mixed active content loading blocked "http://thpsvido.herokuapp.com/js/app.js" 
tykus's avatar

Should I have compiled it

What were you doing in development?

it says "the load has been blocked"

Might be a mixed content issue 🤷‍♂️. Can you try to visit the URL for the CSS directly http:www.your-app.com/css/app.css; does that 404?

warpig's avatar
Level 12

Forget about that question, this is actually the first time Im trying to deploy something when I had Tailwind installed through Mix, (other times have involved just using a CDN) .. basically I don't know what Heroku is expecting honestly.

tykus's avatar

You can compile a production build of app.css locally; add and commit it to your local git repo and push to your remote repo.

npm run prod
git add public/css/app.css public/js/app.js
git commit -m "Compiled CSS"
git push origin HEAD

Then pull the changes (or whatever you do to deploy changes) in Heroku.

1 like
warpig's avatar
Level 12

Got it, is this normal.. :

webpack compiled successfully
fatal: pathspec 'css/app.css' did not match any files
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
        modified:   public/css/app.css
        modified:   public/js/app.js

Untracked files:
        public/js/app.js.LICENSE.txt

no changes added to commit
Everything up-to-date

and, should I do the same for app.js too? Thanks :-)

tykus's avatar
tykus
Best Answer
Level 104

Sorry, yes public/css/app.css 🤦‍♂️

And yes, for compiled JS also

Both updated above.

warpig's avatar
Level 12

You're the best @tykus thanks for the answer, nothing makes a developer happier than seeing his or her project uploaded into the internet!! He-he. Thanks.

1 like

Please or to participate in this conversation.