Jumpstart Pro

Dan Tappin • July 15, 2019 5:33am

Can anyone add a non-gray border to anything in the template? In development I can but in production all borders are grey no mater what color is specified. Try it on this site by using the inspector and changing the HTML. I can't find element on here that you can make non-grey.

Chris Oliver

Dan Tappin • July 16, 2019 2:07am

I did some digging in the source code - none of the 'border-green-700' type CSS styles other than gray are included in the deployed manifest files. Look in the .js and .css head files on this site - these do not exist here either.

Chris Oliver - I think there is a bug in the system somewhere.

Brandon B. • July 16, 2019 10:15pm

Dan Tappin - You are correct, I can get the border classes on the dev server to work with the single class call, but can not get it to fire on deploy, similar to this website, I went to the forms doc and tried to see if it would call border-green-700 or a few others, and could not get it to fire.

Dan Tappin • July 16, 2019 10:32pm

Thanks

Brandon B. for confirming my sanity. I assumed I had screwed something up lol

Dan Tappin • July 18, 2019 4:16am

Chris Oliver something is really broken here. I added my own 'border2-green-700' alternate class to my main 'application.scss' file and applied it to my elements. Again works in development locally and again the new CSS classes are no where to be found in the deployed manifest.

Brandon B. • July 18, 2019 5:36pm

Dan Tappin How are you deploying? It looks like by default the

config/environments/*

takes precedence over application.rb, also are you deploying with the staging or production deployment? Last question: do you have both postgres and redis on your production server/environment?

Dan Tappin • July 18, 2019 5:47pm

Brandon B. I am using Hatchbox to deploy. Where would I find the 'config/environments/*' declaration?

Local development works fine. Production breaks. I am finding more examples of this where the CSS on background colors also fail. Try applying 'bg-green-700' to any div on this page. Then try 'bg-gray-700'. Only gray works. Perhaps

Chris Oliver really likes B&W lol ;)

Dan Tappin • July 18, 2019 5:53pm

The crazy thing is that 'bg-secondary-500' (green) and 'bg-danger-500' (red) works as a workaround for now.

Dan Tappin • July 18, 2019 6:09pm

I was wrong - the bg-danger ones don't work either.

Brandon B. • July 18, 2019 7:05pm

ror_app_root/config/environments/production.rb

replace ror_app_root with whatever your app's root directory is, and the production.rb file is where you can configure your production configurations. I could be wrong (because I do not use hatchbox) but if you change line 29(default) from:

# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false

change to:

# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true

it may fix the issue. It appears to be something with your assets and precompilation.

All the config settings in that general area (the assets portion of the production.rb file) will be where your development and production configurations differ.

Brandon B. • July 18, 2019 7:12pm

Dan Tappin also try commenting out line 23 on the production.rb file as well. Sometimes I have to play with these config settings, depending on how I am serving assets in production.
Comment Out the third line below(which is line 23 in the default production.rb config file), and try to deploy:

# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

Dan Tappin • July 18, 2019 10:44pm

Neither of those worked. It's got to be something else. How can only half the Tailwind CSS load? It's in the Jumpstartrails.com source code also.

Dan Tappin • July 18, 2019 11:19pm

Brandon B. I figured it out... sort of. It's this:

https://www.purgecss.com/

The template uses this to purge out unused CSS to make your site load faster. The issue is it seems to only leaving in the CSS styles that

Chris Oliver has specified in the template. If you use any other CSS styles they won't render.

Have a look in your root 'postcss.config.js' file.

I added a test style:

if (process.env.RAILS_ENV === "production" || process.env.RAILS_ENV === "staging") {
  // A whitelist of css classes to keep that might not be found in the app
  function collectWhitelist() {
    return ['font-serif', 'tab-active', 'transition', 'text-gray-400', 'border-green-700'];
  }

and ta-da! it works in production. Very frustrating but glad to see the light at the end of the tunnel.

As a work around for now I am disabling this completely. On my to do list is to figure out how to use this and not kill all my CSS.

Michelle Hartley • August 1, 2019 3:06am

So, none of the classes listed in app/views/ & app/helpers/ aren't working in production?

Dan Tappin • August 1, 2019 2:54pm

I did not dig through to figure out where this was breaking. Some of the CSS in the views is being loaded and some not. I got the impression this processes your html and then compiles the bare minimum CSS you need to deploy. If that's the case it's broken because I had added many tailwind standard classes to my template app and after deploying those classes are not being added to the CSS.

Michelle Hartley • August 1, 2019 8:15pm

Weird. My understanding was any classes added to app/views/....html.erb would be included. Have you tried removing purge.css just to see what happens? So far I haven't had any trouble. (knock on wood)

Bryan Stewart • March 11, 2022 8:19pm

Is this why I cannot use any colors in my divs.. This is in dev for me. If i do <div class="bg-blue-800">i get nothing</div>

Bug in Template CSS?

Notifications