Next.js Discord

Discord Forum

CSS Randomly not Loading on Build

Answered
Yellow-horned horntail posted this in #help-forum
Open in Discord
Yellow-horned horntailOP
It's pretty hard to explain, so please, watch the quick demo to know what I mean.

When I run npm run dev the page works fine, but when I npm run build then npm start, I get this odd issue.

Help would be appreciated! Here's the GitHub: https://github.com/skzhengkai/hyunGPT-Dashboard-Shadcn

Thank you in advance!
Answered by Yellow-horned horntail
The issue was fixed by duplicating the globals.css into the /servers folder and referencing that instead of the original globals.css file.
View full answer

38 Replies

Yellow-horned horntailOP
And I'm aware of the Error 423 and 418, but I get them on /dashboard which doesn't have this refresh no css type of error.
James4u
Inspect the elements, see if tailwind css bundle is getting loaded
@James4u Inspect the elements, see if tailwind css bundle is getting loaded
Yellow-horned horntailOP
How do I check that?
James4u
In the browser
Yellow-horned horntailOP
okay, let me take a look
@James4u In the browser
Yellow-horned horntailOP
What should I be looking for?
James4u
pick one of your element
you have tailwind classnames over there, right?
Yellow-horned horntailOP
This is the dashboard page (the one that's working fine), if that helps
@James4u you have tailwind classnames over there, right?
Yellow-horned horntailOP
yeah
James4u
Yellow-horned horntailOP
Thanks, let me do that
@James4u Click to see attachment
Yellow-horned horntailOP
James4u
your tailwindcss is not getting build
Yellow-horned horntailOP
yeah on the dashboard page its working fine hahaa
James4u
can you show me tailwind config?
and also your directory structure (screenshot of vscode)
Yellow-horned horntailOP
ofc
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
Directory structure is here https://github.com/skzhengkai/hyunGPT-Dashboard-Shadcn
Yellow-horned horntailOP
its a lot of files not sure if i can screenshot it all
James4u
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
this is overtaken
app and components should be enough?
Yellow-horned horntailOP
good point, should I try
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    ],
I'm going to try
  content: [
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    ],

and let you know if it works
@James4u app and components should be enough?
Yellow-horned horntailOP
I tried the above and it still has the same error
Yellow-horned horntailOP
@James4u I think the problem was the actual code of the servers file, because when I replaced it with an older version, it worked fine.

The version I replaced it with: https://github.com/skzhengkai/hyunGPT-Dashboard-Shadcn/commit/bca75caeb46faa92e03ff7ccf02888c0e7d9a42e#diff-817bc2b6ba58137c5165ef216552fee180e719e023cffc70f45958b4778a7b34
Yellow-horned horntailOP
Apparently the reason was because of the [server_id] part - removing it fixed it. not sure why
Yellow-horned horntailOP
The issue was fixed by duplicating the globals.css into the /servers folder and referencing that instead of the original globals.css file.
Answer
Yellow-horned horntailOP
Seems like there has been an underlying bug with dynamic routes in next.js for a while:
- https://github.com/vercel/next.js/issues/49871