[Next.js Deployment] Styles Not Applied in Static Export

I'm facing an issue with deploying a Next.js project. After following the steps for static export of HTML, CSS, and JavaScript files from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/deploying/static-exports), the styles are not being applied. The generated HTML is just plain, without any of the expected TailwindCSS styling.

What I've Tried:

Checked the export path in the Next.js configuration.
Ensured that TailwindCSS is correctly configured.
Verified the inclusion of Tailwind in the post-build files.

Technologies: Next.js, TailwindCSS.
Code Provided:
Here are my configuration files for PostCSS and TailwindCSS .
postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

My directory structure is:

.
├── .eslintrc.json
├── .gitignore
├── .next/
├── README.md
├── jsconfig.json
├── next.config.js
├── package.json
├── postcss.config.js
├── public/
│   └── images/
├── src/
│   └── app/
│       ├── components/
│       │   ├── Navbar.js
│       │   └── Services.js
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── pages/
│       └── utility/
└── tailwind.config.js

.
├── .eslintrc.json
├── .gitignore
├── .next/
├── README.md
├── jsconfig.json
├── next.config.js
├── package.json
├── postcss.config.js
├── public/
│   └── images/
├── src/
│   └── app/
│       ├── components/
│       │   ├── Navbar.js
│       │   └── Services.js
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── pages/
│       └── utility/
└── tailwind.config.js

I would appreciate any insights or suggestions on why the TailwindCSS styles are not being applied in the static export and how to resolve this issue.

[Next.js Deployment] Styles Not Applied in Static Export

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

My directory structure is:

.
├── .eslintrc.json
├── .gitignore
├── .next/
├── README.md
├── jsconfig.json
├── next.config.js
├── package.json
├── postcss.config.js
├── public/
│   └── images/
├── src/
│   └── app/
│       ├── components/
│       │   ├── Navbar.js
│       │   └── Services.js
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── pages/
│       └── utility/
└── tailwind.config.js

.
├── .eslintrc.json
├── .gitignore
├── .next/
├── README.md
├── jsconfig.json
├── next.config.js
├── package.json
├── postcss.config.js
├── public/
│   └── images/
├── src/
│   └── app/
│       ├── components/
│       │   ├── Navbar.js
│       │   └── Services.js
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── pages/
│       └── utility/
└── tailwind.config.js

I would appreciate any insights or suggestions on why the TailwindCSS styles are not being applied in the static export and how to resolve this issue.

[Next.js Deployment] Styles Not Applied in Static Export

[Next.js Deployment] Styles Not Applied in Static Export

Similar Threads

Similar Threads

Similar Threads