Css is not loaded correctly

[justoverclockl]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/competent-james-kzly2d

To Reproduce

1: visit the sandbox: https://codesandbox.io/p/devbox/competent-james-kzly2d 2: update route to: https://kzly2d-3000.csb.app/dashboard/scheduler 3: as you can see i have global.css that is loaded inside the main page and inside scheduler page, with yarn dev all works fine, but in production this css has no effect and is not loaded.

Current vs. Expected behavior

Actually css is not loaded, should be.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #14-Ubuntu SMP PREEMPT_DYNAMIC Tue Nov 14 14:59:49 UTC 2023
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

warn  - Latest canary version not detected, detected: "14.0.4", newest: "14.0.5-canary.55".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
Done in 1.93s.

Which area(s) are affected? (Select all that apply)

Not sure, App Router

Which stage(s) are affected? (Select all that apply)

next start (local)

Additional context

No response

[shriekdj]

Hey @justoverclockl I checked your sandbox, issue is with your tailwind.config.ts it is currently

/** @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}",
  ],
  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: [],
};

But There is no src folder in your project,

Either Create src folder or update your tailwind.config.ts file's content section to include app folder instead. Hope this will help your issue

[justoverclockl]

if this is the issue, why tailwind classes are correctly applied?

[shriekdj]

@justoverclockl i forked your codesandbox and changed content of tailwind.config.ts and it's working https://codesandbox.io/p/devbox/competent-james-forked...

import globals.css will only reset the css,

but for applying the new css generated with classname you must need to add them in tailwind.config.ts 's content where it tailwind's transpiler generates css for that.

[shriekdj]

tailwindcss generates css on demand it does not loaded already like bootstrap 😊.

[justoverclockl]

Thx I will try for sure!

[justoverclockl]

@shriekdj not work at all, if i do your modification, tailwind is not loaded anymore.

[shriekdj]

@justoverclockl try moving root app folder into src folder or change this part of tailwind.config.ts ./src/app/**/*.{js,ts,jsx,tsx,mdx} to ./app/**/*.{js,ts,jsx,tsx,mdx}

[rwieruch]

Ran into the same issue when I created a src/features/ folder and had to add it in my Tailwind config because the default was:

content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],

Is there any reason why the default is not simply:

content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],

?

[shriekdj]

@rwieruch because the template of nextjs with tailwindcss have the content already as per non src folder and for both src template and non src template they uses the same tailwind.config.js