Styles are not loading in production. Not sure what to do. In my local machine, everything loads smoothly but not in production.

I am using Rails 6.1.3.8, Ruby 3.1.2, latest version of Yarn, Webpacker 5.4.4.

My package.json as you can see contains Tailwind and Flowbite:

{
  "name": "villa-alpha",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.4",
    "@tailwindcss/container-queries": "^0.1.1",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.13",
    "flatpickr": "^4.6.13",
    "flowbite": "^2.3.0",
    "lg-thumbnail": "^1.2.1",
    "lg-zoom": "^1.3.0",
    "lightgallery": "^2.7.2",
    "moment": "^2.30.1",
    "sweetalert2": "^11.12.2",
    "tailwindcss": "^3.4.6",
    "tui-calendar": "^1.15.3",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}

My webpacker.yml is standard:

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

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

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

Gemfile:

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.1.2'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.7', '>= 6.1.7.3'
# Use postgresql as the database for Active Record
gem 'pg', '~> 1.1'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  # gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver', '>= 4.0.0.rc1'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'devise', '~> 4.9'

gem 'geocoder'
gem 'ransack'
gem 'recaptcha', require: 'recaptcha/rails'

gem 'ffi', '~> 1.17'

I render Tailwind in my app/javascript/stylesheets/application.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

then in my app/javascript/packs/application.js:

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
import "stylesheets/application.css";
import 'flowbite';
import './google_maps_autocomplete';

Rails.start();
Turbolinks.start();
ActiveStorage.start();

in my app/assets/stylesheets/application.css:

 *= require_tree .
 *= require_self
 */

 @import 'flowbite/dist/flowbite.css';

tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './node_modules/flowbite/**/*.js',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['MillerBannerRoman', 'Georgia', 'serif', ...defaultTheme.fontFamily.sans],
        italic: ['MillerBannerItalic', 'Georgia', 'serif'],
        lightItalic: ['MillerBannerLightItalic', 'Georgia', 'serif'],
        light: ['MillerBannerLight', 'Georgia', 'serif'],
        semibold: ['MillerBannerSemibold', 'Georgia', 'serif'],
        semiboldItalic: ['MillerBannerSemiboldItalic', 'Georgia', 'serif'],
      },
      lineHeight: {
        'extra-tight': '1.2',
      },
      colors: {
        primary: {
          50: '#f2fbf9',
          100: '#d2f5ed',
          200: '#a6e9dd',
          300: '#71d7c8',
          400: '#44bdaf',
          500: '#2aa296',
          600: '#1f827a',
          700: '#1d6863',
          800: '#1b5451',
          900: '#163937',
          950: '#0a2928',
          light: '#f2fbf9',
          DEFAULT: '#163937',
          dark: '#0a2928',
        },
        beige: {
          '50': '#fffcf2',
          '100': '#fef1c7',
          '200': '#fde28a',
          '300': '#fcce4d',
          '400': '#fbb824',
          '500': '#f5970b',
          '600': '#d97106',
          '700': '#b44e09',
          '800': '#923c0e',
          '900': '#78320f',
          '950': '#451803',
          light: '#fffcf2',
          DEFAULT: '#FFFCF2',
          dark: '#451803',
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('flowbite/plugin'),
  ]
}

postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
  ]
}

My application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>Villa Mar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.credentials.dig(:google_maps_api_key) %>&libraries=places"></script>

    <!--  Gogle Maps API to window -->
    <script type="text/javascript">
      window.googleMapsApiKey = "<%= Rails.application.credentials.dig(:google_maps_api_key) %>";
    </script>
  </head>

  <body>
    <% unless (controller_name == 'sessions' && action_name == 'new') || (controller_name == 'registrations' && action_name == 'new') %>
      <%= render partial: "shared/main-navbar-dark" %>
    <% end %>
    <%= render partial: "layouts/flash" %>
    <%= yield %>
    <%= render partial: "shared/footer" %>
  </body>
</html>

One of my views home.html.erb:

<%= stylesheet_link_tag 'property_show', media: 'all', 'data-turbo-track': 'reload' %>
<%= stylesheet_link_tag 'custom_flatpicker', media: 'all', 'data-turbo-track': 'reload' %>

<%= javascript_pack_tag 'property_show' %>

<%= render "shared/sections/home-hero" %>
<div class="md:hidden block">
  <%= render "shared/sections/mobile-hero-content" %>
</div>
<%= render "shared/sections/home-property-cards" %>
<%= render "shared/sections/home-bennefits" %>
<%= render "shared/sections/home-get-involved" %>
<%= render "shared/sections/home-video" %>

In Digital Ocean app platform I have added all my ENV variables, like master key, node variables, database_url all is done, application deploys fine with db migrated and seeded. All ok except for stylesheets, I got no stylesheets loading, nothing.

Build command in Digital Ocean settings:

bundle install
yarn install
bundle exec rails webpacker:install
RAILS_ENV=production bundle exec rails assets:clobber
RAILS_ENV=production bundle exec rails webpacker:compile
RAILS_ENV=production bundle exec rails assets:precompile

the above run successfully.

Here is my production console outputs to show you, please view the last 2 commands in the end not showing any output.

apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ rails -v
Rails 6.1.7.8
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ yarn list @rails/webpacker
yarn list v1.22.22
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ @rails/[email protected]
Done in 1.56s.
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ yarn list tailwindcss
yarn list v1.22.22
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
Done in 1.56s.
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ yarn list flowbite
yarn list v1.22.22
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
Done in 1.54s.
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ yarn list --pattern tailwindcss
yarn list v1.22.22
├─ @tailwindcss/[email protected]
├─ @tailwindcss/[email protected]
├─ @tailwindcss/[email protected]
└─ [email protected]
Done in 1.48s.
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ yarn list --pattern flowbite
yarn list v1.22.22
└─ [email protected]
Done in 1.43s.
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ ls -l public/packs/css
total 92
-rw-rw-r-- 1 apps apps  3341 Jan  1  1980 application-27a39e0f.css
-rw-rw-r-- 1 apps apps   977 Jan  1  1980 application-27a39e0f.css.br
-rw-rw-r-- 1 apps apps  1221 Jan  1  1980 application-27a39e0f.css.gz
-rw-rw-r-- 1 apps apps 31065 Jan  1  1980 custom_calendar-519be32f.css
-rw-rw-r-- 1 apps apps  6997 Jan  1  1980 custom_calendar-519be32f.css.br
-rw-rw-r-- 1 apps apps  7895 Jan  1  1980 custom_calendar-519be32f.css.gz
-rw-rw-r-- 1 apps apps 13345 Jan  1  1980 lightgallery-9f544dc0.css
-rw-rw-r-- 1 apps apps  2615 Jan  1  1980 lightgallery-9f544dc0.css.br
-rw-rw-r-- 1 apps apps  3063 Jan  1  1980 lightgallery-9f544dc0.css.gz
-rw-rw-r-- 1 apps apps 15590 Jan  1  1980 property_show-3c8c5c0d.css
-rw-rw-r-- 1 apps apps  2544 Jan  1  1980 property_show-3c8c5c0d.css.br
-rw-rw-r-- 1 apps apps  2942 Jan  1  1980 property_show-3c8c5c0d.css.gz
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ ls -l public/packs/js
total 7803
-rw-rw-r-- 1 apps apps  149415 Jan  1  1980 application-d298cba75f0ce66ddeff.js
-rw-rw-r-- 1 apps apps   29180 Jan  1  1980 application-d298cba75f0ce66ddeff.js.br
-rw-rw-r-- 1 apps apps   33626 Jan  1  1980 application-d298cba75f0ce66ddeff.js.gz
-rw-rw-r-- 1 apps apps  492620 Jan  1  1980 application-d298cba75f0ce66ddeff.js.map
-rw-rw-r-- 1 apps apps   93172 Jan  1  1980 application-d298cba75f0ce66ddeff.js.map.br
-rw-rw-r-- 1 apps apps  109751 Jan  1  1980 application-d298cba75f0ce66ddeff.js.map.gz
-rw-rw-r-- 1 apps apps    1498 Jan  1  1980 custom_accordion-11c63cc39547d3d780b6.js
-rw-rw-r-- 1 apps apps     597 Jan  1  1980 custom_accordion-11c63cc39547d3d780b6.js.br
-rw-rw-r-- 1 apps apps     704 Jan  1  1980 custom_accordion-11c63cc39547d3d780b6.js.gz
-rw-rw-r-- 1 apps apps    5965 Jan  1  1980 custom_accordion-11c63cc39547d3d780b6.js.map
-rw-rw-r-- 1 apps apps    1991 Jan  1  1980 custom_accordion-11c63cc39547d3d780b6.js.map.br
-rw-rw-r-- 1 apps apps    2253 Jan  1  1980 custom_accordion-11c63cc39547d3d780b6.js.map.gz
-rw-rw-r-- 1 apps apps  988796 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js
-rw-rw-r-- 1 apps apps   24967 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js.LICENSE.txt
-rw-rw-r-- 1 apps apps  162318 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js.br
-rw-rw-r-- 1 apps apps  204379 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js.gz
-rw-rw-r-- 1 apps apps 3658199 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js.map
-rw-rw-r-- 1 apps apps  497449 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js.map.br
-rw-rw-r-- 1 apps apps  661542 Jan  1  1980 custom_calendar-1d409e1a7e47963d6280.js.map.gz
-rw-rw-r-- 1 apps apps    2095 Jan  1  1980 google_maps_autocomplete-8661978ecd462a985d4b.js
-rw-rw-r-- 1 apps apps     765 Jan  1  1980 google_maps_autocomplete-8661978ecd462a985d4b.js.br
-rw-rw-r-- 1 apps apps     898 Jan  1  1980 google_maps_autocomplete-8661978ecd462a985d4b.js.gz
-rw-rw-r-- 1 apps apps    7835 Jan  1  1980 google_maps_autocomplete-8661978ecd462a985d4b.js.map
-rw-rw-r-- 1 apps apps    2476 Jan  1  1980 google_maps_autocomplete-8661978ecd462a985d4b.js.map.br
-rw-rw-r-- 1 apps apps    2772 Jan  1  1980 google_maps_autocomplete-8661978ecd462a985d4b.js.map.gz
-rw-rw-r-- 1 apps apps    2159 Jan  1  1980 google_maps_style-5a5c06ae1baea0bd9339.js
-rw-rw-r-- 1 apps apps     878 Jan  1  1980 google_maps_style-5a5c06ae1baea0bd9339.js.br
-rw-rw-r-- 1 apps apps    1037 Jan  1  1980 google_maps_style-5a5c06ae1baea0bd9339.js.gz
-rw-rw-r-- 1 apps apps    8031 Jan  1  1980 google_maps_style-5a5c06ae1baea0bd9339.js.map
-rw-rw-r-- 1 apps apps    2640 Jan  1  1980 google_maps_style-5a5c06ae1baea0bd9339.js.map.br
-rw-rw-r-- 1 apps apps    2979 Jan  1  1980 google_maps_style-5a5c06ae1baea0bd9339.js.map.gz
-rw-rw-r-- 1 apps apps   74010 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js
-rw-rw-r-- 1 apps apps     954 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js.LICENSE.txt
-rw-rw-r-- 1 apps apps   16792 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js.br
-rw-rw-r-- 1 apps apps   19074 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js.gz
-rw-rw-r-- 1 apps apps  240521 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js.map
-rw-rw-r-- 1 apps apps   52042 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js.map.br
-rw-rw-r-- 1 apps apps   61780 Jan  1  1980 lightgallery-9b2f1d4807a0e9b96cfc.js.map.gz
-rw-rw-r-- 1 apps apps   57937 Jan  1  1980 property_show-29f553ef46013178c25f.js
-rw-rw-r-- 1 apps apps   14680 Jan  1  1980 property_show-29f553ef46013178c25f.js.br
-rw-rw-r-- 1 apps apps   16423 Jan  1  1980 property_show-29f553ef46013178c25f.js.gz
-rw-rw-r-- 1 apps apps  180615 Jan  1  1980 property_show-29f553ef46013178c25f.js.map
-rw-rw-r-- 1 apps apps   42847 Jan  1  1980 property_show-29f553ef46013178c25f.js.map.br
-rw-rw-r-- 1 apps apps   49074 Jan  1  1980 property_show-29f553ef46013178c25f.js.map.gz
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ 
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ cat public/packs/manifest.json | grep tailwind
apps@villa-mar-alpha-7d5c6cbd8c-b8rrh:~$ cat public/packs/manifest.json | grep flowbite