CODEWITHSUNDEEP
google-cloud-platformruby-on-rails-6tailwind-css
Esseme
Esseme

Reputation: 179

Tailwind CSS Doesn't Display In Production On Google Cloud Platform

I integrated Tailwind CSS into my Rails 6 App. The CSS is displayed fine in development but that isn't the case in production.

This is how my application.html.erb looks like;

 <!DOCTYPE html>
<html>
  <head>
    <title>HomePetVet</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <% unless flash.empty? %>
      <script type="text/javascript">
        <% flash.each do |f| %>
          <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %>
          toastr['<%= type %>']('<%= f[1] %>');
        <% end %>
      </script>
    <% end %>
    <%= yield %>
    <%= javascript_pack_tag 'sb-admin-2', 'data-turbolinks-track': 'reload' %>
  </body>
</html>

This is my webpacker.yml file;

 production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

I seet extract_css to true in webpacker.yml

This is my package.json file;

 {
  "name": "MyProject",
  "private": true,
  "dependencies": {
    "tailwindcss": "^1.4.6",
    "toastr": "^2.1.4",
    "turbolinks": "^5.2.0",
    "yarn": "^1.22.4"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

You can observe that tailwindcss is not under devDependencies. Before deploying to gcp by gcloud app deploy I do RAILS_ENV=production rails assets:precompile but the tailwind css is still not showing in production.

I followed this to deploy my Rails 6 App to GCP.

This is my app.yaml file:

entrypoint: bundle exec rails server Puma -p $PORT
runtime: ruby
env: flex

manual_scaling:
 instances: 1
resources:
 cpu: 1
 memory_gb: 0.5
 disk_size_gb: 10

Notice entrypoint: bundle exec rails server Puma -p $PORT in app.yaml. The one from the guide is entrypoint: bundle exec rackup --port $PORT

I don't know if this makes a difference but I wanted to mention it.

Where could I be going wrong?

Upvotes: 3

Views: 1034

Answers (1)

Esseme
Esseme

Reputation: 179

Incase, another Dev comes across this issue, this is how I solved it;

I edited the postcss.config.js file to include require('autoprefixer')

    let environment = {
    plugins: [
        require('autoprefixer'), #added this
        require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
        require('postcss-import'),
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
            autoprefixer: {
                flexbox: 'no-2009'
            },
            stage: 3
        })
    ]
};
module.exports = environment;

With this, Tailwind CSS is showing in production on GCP.

Upvotes: 1

Related Questions