Next.jsで作ったものをVercelに公開したらTailwindCSSが反映されない

前提・実現したいこと

Next.jsの勉強がてらに事項紹介ページや技術記事を投稿するためのブログを作成しているのですが、作成したものをvercelにてホスティングしてデプロイしようと考えてます。
スタイリングにはTailwindcssを利用しました。
そのほかにもいくつかライブラリを利用しました。
ちなみにpacage.jsonは以下の通りです。

package.json
1{
2  "name": "my-portfolio",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev",
7    "build": "next build",
8    "start": "next start"
9  },
10  "dependencies": {
11    "next": "10.0.7",
12    "react": "17.0.1",
13    "react-dom": "17.0.1"
14  }
15  "devDependencies": {
16    "autoprefixer": "^10.2.4",
17    "eslint": "^7.20.0",
18    "eslint-plugin-react": "^7.22.0",
19    "eslint-plugin-tailwind": "^0.2.1",
20    "@material-ui/core": "^4.11.3",
21    "@material-ui/icons": "^4.11.2",
22    "hamburger-react": "^2.4.0",
23    "gray-matter": "^4.0.2",
24    "postcss": "^8.2.6",
25    "react-swipeable-views": "^0.13.9",
26    "remark": "^13.0.0",
27    "remark-html": "^13.0.1",
28    "tailwindcss": "^2.0.4"
29  }
30}
31

発生している問題・エラーメッセージ

ローカル環境で一度yarn buildをしてきちんとビルドが通ることを確認して、なおかつyarn devでローカルホストで起動した時にきちんと表示されるかも確認してからvercelにてホスティングしました。
ホスティングして公開はできたが肝心のサイトのスタイルが全く反映されていないという状態が起きた。
ビルドはvercelでも成功したのですが、ホスティングしたものを開いてみたらtailwindcssが反映され図に表示されてしまった。
上の写真がローカルホストの時の表示です。下の写真がvercelの物です。

現状TailwindCSSが悪いのか、そもそもの仕様でできないのか、packageのインストール方法が悪いのか...etc、原因がわからないです。