I have my project running just fine during development, and the styles also build fine during production.
But they don’t apply at all on hitting the deployment endpoint at all even though it fetches the file
PS: i’m using @apply for most of my classes(not all/it’s a mix of @apply and regular utility classes).
I have my styles stored in /styles/globals.css and have imported it inside the root layout like this:
import "@/styles/globals.css";
NextJS v15.1.6
Tailwind CSS v3.4.17
Vercel
Here’s the Tailwind config
import type { Config } from "tailwindcss";
export default {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./index.html",
],
theme: {
extend: {
fontFamily: {
quicksand: ["var(--font-quicksand)"],
},
},
},
plugins: [],
} satisfies Config;
and here’s the Next config:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
compress: true,
devIndicators: {
buildActivity: false,
appIsrStatus: false,
},
images: {
dangerouslyAllowSVG: true,
remotePatterns: [
...
],
},
};
export default nextConfig;
Here’s the link: Production build
