We've moved discussions to Discord

Heroku not using updated entries in tailwind.config.js

Robert Pierce
After successful setup and deploy to production on heroku (including credentials), I deployed my latest customizations (in tailwind.config.js — mostly custom colors) to heroku. Everything has worked fine up to this point, and everything still seems fine,  but the custom tailwind entries are not being used in production on heroku to compile the css. I've tried all the usual tweaks and googling I can think of. Why would the tailwind.config.js changes not be read during compile on heroku? Any help? 
Chris Oliver
Make sure PurgeCSS isn't stripping them out. You can add exceptions into postcss.config.js
Robert Pierce
Yup. Learned something new from you and https://www.viget.com/articles/a-better-approach-for-using-purgecss-with-tailwind/. The pertinent section: "In another case, you might be styling tags that are generated by the WYSIWYG editor in your CMS which otherwise do not exist in your codebase (I’ve been bitten by ol before)."  

It didn't dawn on me that the styles I saw missing were in the (tailwind savvy) user created html content of a model. How could PurgeCSS possibly forecast those classes? Duh.

Thanks for pointing the way. And thanks for all your excellent work.

—Robert
Chris Oliver
It definitely takes a bit of getting used to when you notice things missing in production. I've had my fair share of missing things in production and left scratching my head, so now that's one of the things I keep in mind when I'm debugging. That said, boy does it produce nice and compact CSS files! 
Nathan Jones
Hey Chris Oliver , I'm seeing a styling issue once I deploy to staging which I think is relevant for this forum?

It looks like either the "lg" breakpoint or grid system of tailwind is not being respected when I deploy to my staging environment. I am using tailwindcss/ui but have done the necessary configuration and upgrading to ensure those styles are applied correctly (add to plugins, bump tailwindcss).

Here's my dashboard locally:
Screen Shot 2020-09-28 at 3.30.00 PM.png 353 KB


On staging:
Screen Shot 2020-09-28 at 3.29.52 PM.png 317 KB


It would appear something is being stripped out (maybe with Purge?) but I cannot figure out what, all the classes appear to be present in both environments.

Nathan Jones
I should have read the linked article above closer, Purge was wiping out the breakpoint classes generated by Tailwindcss. That being said, the default behavior of Tailwind + Purge as configured in Jumpstart Pro will break this way when deployed to Heroku without the proper whitelisting.

I added the following to my postcss.config.js file:
Screen Shot 2020-09-29 at 11.33.19 AM.png 76 KB


Regex: /\w\w:w-\d\/\d/

Chris Oliver Maybe this is good candidate for an enhancement to Jumpstart Pro? 
I wonder if we could replicate this in the current version?
Nick Willever
Nathan Jones  this is off-topic - but saw your screenshots of what you are building and we may have some things in common, ping me here if you get a chance nick@nesso.community
Notifications
You’re not receiving notifications from this thread.