デプロイ時にTailwind css が機能しない

cloudfrontにデプロイ後tailwind cssが機能しません。(Next.jsを使っています)

～.cloudfront.net/index.htmlにアクセス後の画面

正しい表示（localhost）

分かる方がいたらご教授いただければ幸いです。

tailwind.confug.js

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  important: true,
}

情報追加
_app.tsx

typescript
1import React from "react"
2import Head from "next/head"
3import { AppProps } from "next/app"
4import { ThemeProvider } from "@material-ui/core/styles"
5import CssBaseline from "@material-ui/core/CssBaseline"
6import theme from "../components/utils/theme"
7import '../styles/tailwind.css'
8
9export default function MyApp({ Component, pageProps }: AppProps) {
10
11  return (
12    <React.Fragment>
13      <Head>
14        <title></title>
15        <meta
16          name="viewport"
17          content="minimum-scale=1, initial-scale=1, width=device-width"
18        />
19      </Head>
20      <ThemeProvider theme={theme}>
21        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
22        <CssBaseline />
23        <Component {...pageProps} />
24      </ThemeProvider>
25    </React.Fragment>
26  )
27}

_documents.tsx

typescript
1import React from "react"
2import Document, { Head, Html, Main, NextScript } from "next/document"
3import { ServerStyleSheets } from "@material-ui/core/styles"
4import theme from "../components/utils/theme"
5
6export default class MyDocument extends Document {
7  render() {
8    return (
9      <Html lang="ja-JP">
10        <Head>
11          {/* PWA primary color */}
12          <meta name="theme-color" content={theme.palette.primary.main} />
13          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
14        </Head>
15        <body>
16          <Main />
17          <NextScript />
18        </body>
19      </Html>
20    )
21  }
22}
23
24MyDocument.getInitialProps = async (ctx) => {
25  const sheets = new ServerStyleSheets()
26  const originalRenderPage = ctx.renderPage
27
28  ctx.renderPage = () =>
29    originalRenderPage({
30      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
31    })
32
33  const initialProps = await Document.getInitialProps(ctx)
34
35  return {
36    ...initialProps,
37    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
38  }
39}