[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.
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server