CSS Randomly not Loading on Build

[hushed ocean]

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!

[chilly pumice]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[hushed ocean]

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.

[winter vector]

Inspect the elements, see if tailwind css bundle is getting loaded

[hushed ocean]

How do I check that?

[winter vector]

In the browser

[hushed ocean]

okay, let me take a look

[hushed ocean]

What should I be looking for?

[winter vector]

pick one of your element

you have tailwind classnames over there, right?

[hushed ocean]

This is the dashboard page (the one that's working fine), if that helps

[hushed ocean]

yeah

[hushed ocean]

Thanks, let me do that

[winter vector]

your tailwindcss is not getting build

[hushed ocean]

yeah on the dashboard page its working fine hahaa

[winter vector]

can you show me tailwind config?

and also your directory structure (screenshot of vscode)

[hushed ocean]

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

[winter vector]

this one also

[hushed ocean]

its a lot of files not sure if i can screenshot it all

[winter vector]

  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?

[hushed ocean]

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

[hushed ocean]

I tried the above and it still has the same error

[hushed ocean]

@winter vector 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

[hushed ocean]

Apparently the reason was because of the [server_id] part - removing it fixed it. not sure why

[hushed ocean]

The issue was fixed by duplicating the globals.css into the /servers folder and referencing that instead of the original globals.css file.

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