Tailwind 2.0 fails to build on Heroku

I have a Rails app that uses Tailwind.

I recently upgraded to Tailwind 2.0.1-compat and everything works fine on my machine, however when I deploy on Heroku I get this error:

  ERROR in ./app/javascript/css/application.scss

  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

  ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  SassError: File to import not found or unreadable: tailwindcss/base.

     on line 2 of /tmp/build_fd32fb6b_/app/javascript/css/application.scss

  >> @import "tailwindcss/base";

This is my application.scss file

/* purgecss start ignore */
@import "tailwindcss/base";
@import "tailwindcss/components";
/* purgecss end ignore */

@import "components/utilities";

@import "tailwindcss/utilities";

This is my 'package.json' file

{
  "license": "UNLICENSED",
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^3.0.0",
    "@rails/webpacker": "5.2.1",
    "@tailwindcss/postcss7-compat": "^2.0.1",
    "node-libs-browser": "^2.2.1",
    "postcss-import": "12"
  },
  "devDependencies": {
    "autoprefixer": "9",
    "postcss": "7",
    "tailwindcss": "^2.0.1-compat",
    "webpack-dev-server": "^3.11.0"
  }
}

This is my postcss.config.js file

let environment = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require("tailwindcss"),
    require('autoprefixer'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

module.exports = environment

This is the tailwind.config.js file

module.exports = {
  purge: {
    content: [
      './app/**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js'
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      display: ['Nunito', 'system-ui', 'sans-serif'],
      body: ['Nunito', 'system-ui', 'sans-serif'],
    },
    extend: {
      colors: {
    primary: {
          DEFAULT: '#d742a8',
          dark: '#d537a3',
        },
    secondary: {
          DEFAULT: '#464ba4',
          dark: '#3f4392'
        },
      },
    }
  },
  variants: {
    extend: {
      display: ['group-hover'],
      opacity: ['group-hover'],
    }
  },
  plugins: [],
}

Can anyone help figure out what is wrong with my implementation? Thanks