Tailwind cssが本番環境で一部反映されない

Rails×Vue×tailwind cssで開発を行なっているのですがデプロイ後、本番環境で開発環境では適応されているcssが一部反映されず困っています。

（例） <nav id="nav" class="bg-white absolute top-0 -right-2/3 w-2/5 h-screen transiton duration-500">において"-right-2/3"が適応されなかったり、

<div class="float-left">の　"float"が適応されないなど。

試しにレイアウトが崩れているtailwind cssを通常のcssファイルに書き直してみたところ正常に表示されたのでtailwindに問題があると思われます。

#実際のコード

//tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  purge: ['./src/**/*.{vue,js,jsx,ts,tsx}', './public/index.html'],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {

//postcss.config.js

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

//package.json

"dependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^5.4.3",
    "@smartweb/vue-flash-message": "^1.0.0-alpha.12",
    "@vue/babel-plugin-jsx": "^1.1.0",
    "@vue/compiler-sfc": "^3.2.19",
    "axios": "^0.22.0",
    "turbolinks": "^5.2.0",
    "vue": "^3.2.19",
    "vue-loader": "^16.8.1",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "@webpack-cli/serve": "^1.5.2",
    "autoprefixer": "^9.8.8",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "cross-env": "^7.0.3",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "webpack-dev-server": "^4.3.0"
  },

#試してみたこと

https://zenn.dev/akhmgc/articles/a466662dd4b208#purgecss%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E6%BA%96%E5%82%99
このサイトで解決できるかと思い、一度tailwind, postcss, autoprefixerをyarn removeしてtailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9をyarn addして、postcss.config.jsを書き直しました。

しかし、herokuへのデプロイ時にError: PostCSS plugin tailwindcss requires PostCSS 8.のエラーが発生し、デプロイがそもそもできませんでした。

上記のコードであればデプロイはできます。