how to config tailwinds in rails 6 to display correctly on Heroku

I built a simple rails 6 application with tailwindcss and deployed it to heroku ' my app' If you have click on the link you would see my issue..... this is how it is suppost to look

locally the app renders as it should but once view from heroku it doesn't display the page properly. I can see that the tailwind styles are present in the html when I inspect the page which only leads me to believe that asset pipeline isn't configured properly for heroku to pick up the tailwind configuration.

if anyone has experience this before or can guide me to where I went wrong I would be most appreciative.

Thank you

app/javascript/packs/application.js

//=require activestorage

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

import "../stylesheets/application.scss"

app/javascript/stylesheets/application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

postcss.config.js

let environment = {
  plugins: [
      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
    })
  ]
};

if (process.env.RAILS_ENV === 'production') {
  environment.plugins.push(
      require('@fullhuman/postcss-purgecss')({
        content: [
            './app/**/.html.erb',
            './app/helpers/**/*.rb',
        ],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
      })
  )
}
module.exports = environment

package.json

{
  "name": "pantry_staples",
  "private": true,
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.5.1",
    "tailwindcss": "^1.7.3",
    "@tailwindcss/custom-forms": "^0.2.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "stylelint": "^13.3.3",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-csstree-validator": "^1.8.0",
    "stylelint-scss": "^3.17.2",
    "webpack-dev-server": "^3.11.0"
  }
}