App don't produce Tailwind CSS in production

[Refrezsh]

Summary

I finally migrated my app to the Next JS 13 App directory. The styles on the local machine work in both dev and prod. But when checking on my demo Linux VPS server, I get globals.css file not compiled. It feels like postcss is not working at all.

• Pages variant worked with the same Server conditions and configs.
• It's working on my local machine with (Mac os) and same Node.JS version.
• I clear .next, reinstall node_modules few times.

I have been trying to start this for over 2 hours, has anyone experienced this problem ?
My search led me to this discussion https://github.com/vercel/next.js/discussions/48156, but all tailwind configs copied.

Here resulting CSS on dev or prod mode.

Additional information

System: Ubuntu 22.04
Node: 18.4.0
Next: 13.4.2
Tailwind: 3.3.2
Postcss: 8.4.23
Autoprefixer: 10.4.14

Post CSS config
`module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
`

Tailwind config
`module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("tailwind-scrollbar")({ nocompatible: true }),
    require("@tailwindcss/forms"),
  ],
};`

Example

Just default tailwind css setup

[Refrezsh]

I tried compiling the styles with Tailwind CLI npx tailwindcss -i ./styles/global.css -o ./raw-test/output.css --watch. And it compiled fine.

[Refrezsh]

Ok, so non-ideal solution is.

We leave the ./styles/global.css (or any other folder with base CSS file) where the basic tailwind configuration is like
@tailwind base; @tailwind components; @tailwind utilities;

And for example, in the app folder, we create a second empty global.css file and import them in root layout. Then the build command would be npx tailwindcss -i ./styles/global.css -o ./app/global.css && next build or "prebuild": "npx tailwindcss -i ./styles/global.css -o ./app/global.css".

[vjesu5]

Non-ideal solution but the only one that solved my problem at this moment.
Thanks for sharing and saving my time.

[SpaceHolderdJs]

Thanks a lot, @Refrezsh for this advice.
However, I will notice here that there is no real need to create one more globals.css file, in my case it worked even without second file, here is the structure:

And for those one who are struggling the same I will left this scripts:

scripts": { "dev": "next dev", "build": "next build", "prebuild": "npx tailwindcss -i ./src/app/globals.css -o ./src/app/globals.css", "start": "next start", "lint": "next lint" },
P.S Now the entire global file with styles in Next is named as globals.css, not global.css, so be sure you have appropriate naming in your scripts 💻

[Llein-Dev]

Thanks sir, i fixed

[icyJoseph]

This ought to be something with the environment you are running things on.

Make sure all packages are up to date. Also if the next.config.js uses webpack overrides, make sure those are correct too.

I've tested both on local mac and linux (vercel deployment) and the tailwind css is compiled.

My guess is that there's something in your environment that's causing postcss to fail. Maybe webpack is installed globally? or postcss?

[Refrezsh]

On a clean installation, everything is fine. I will still look for where the problem might be and if so, I will close the question with your answer.

[iguigui]

I have the same issue here :) Tailwindcss not working on production after deploying docker and on GKE pods (google cloud)

[icyJoseph]

Are you coping the postcss and tailwind config files into the production environment?

[Vannn03]

are there any fixed solution yet?

[iguigui]

Hi I can't remember exactly but I think that we were not copying properly the tailwind.config.ts correctly in the docker file or something. It was finally working. Try to connect in ssh in your container and see if all the files are placed correctly

[alexandrosk]

Same issue here with vercel, works fine with building and running locally but not on vercel lol

[kauawerle]

Same problem... my package.json:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@next/font": "^14.0.1",
    "clsx": "^2.0.0",
    "next": "latest",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.5",
    "react-toastify": "^9.1.3",
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "postcss-preset-env": "^9.3.0"
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "typescript": "^4.8.3"
  }
}

my postcss.config,js:

module.exports = {
  plugins: [
    "tailwindcss",
    process.env.NODE_ENV === "production"
      ? [
          "@fullhuman/postcss-purgecss",
          {
            content: [
              "./src/**/*.{js,jsx,mdx,ts,tsx}",
              "./components/**/*.{js,jsx,ts,tsx}",
            ],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
          },
        ]
      : undefined, // Removido o valor 'false'
    "postcss-preset-env",
  ],
};

tailwindconfig:

const defaultTheme = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontSize: {
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.5rem" }],
      base: ["1rem", { lineHeight: "1.75rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "2rem" }],
      "2xl": ["1.5rem", { lineHeight: "2.25rem" }],
      "3xl": ["1.75rem", { lineHeight: "2.25rem" }],
      "4xl": ["2rem", { lineHeight: "2.5rem" }],
      "5xl": ["2.5rem", { lineHeight: "3rem" }],
      "6xl": ["3rem", { lineHeight: "3.5rem" }],
      "7xl": ["4rem", { lineHeight: "4.5rem" }],
    },
    backgroundPosition: {
      bottom: "bottom",
      "bottom-4": "center bottom 1rem",
      center: "center",
      left: "left",
      "left-bottom": "left bottom",
      "left-top": "left top",
      right: "right",
      "right-bottom": "right bottom",
      "right-top": "right top",
      top: "top",
      "top-4": "center top 1rem",
    },
    extend: {
      borderRadius: {
        "4xl": "2.5rem",
      },

      fontFamily: {
        sans: ["var(--font-helvetica)"],
      },
      colors: {
        background: "#0D0E2E",
        text: "#C2ECFE",
      },

      screens: {
        "2xl": "1920px",
      },
    },
  },
  plugins: [],
};

[jonathanlal]

also have this issue. Interestingly:
If i inspect source - The local version has the complete tailwind file with all the classes and starts with this:

/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/*,
etc... all the class names...

but the one on vercel is really small and starts with this and doesn't load all the base tailwind classnames:

@tailwind base;@tailwind components;@tailwind utilities;
etc.. 

so i guess something is wrong with postcss because these

@tailwind base;
@tailwind components;
@tailwind utilities;

are not turning into what they should be turning into

[jonathanlal]

hmm fixed it -

in my main app/layout.tsx file i was importing it like this:

import '/globals.css';

I moved it to ./styles/globals.css and added a path for it in tsconfig

    "paths": {
      "styles/*": ["./styles/*"]
    },

Weird how it worked locally (even with local build) but not on vercel. Not sure why this fixed it either

[taearls]

I was facing this issue as well. I similarly moved my globals.css file into a separate styles/ folder, and imported it in my app/layout.tsx file like import '@/styles/globals.css';. my paths in tsconfig.json look like this (currently this is the default for a new next app)

"paths": {
    "@/*": ["./src/*"]
}

in my case, the styling seemed to break for me in prod after adding css modules alongside tailwind. I had some custom animations that required me to reach outside of tailwind, but then my vercel deployment suddenly stopped showing any tailwind css at all. Very strange. Anyways, your solution worked for me too. hopefully this helps others find a workaround.

[moxx1234]

I've also met similar issue and non of the answers above worked out.
The issue was kind of the same: tailwind styles didn't apply in production.
I could find the compiled css file with all used tailwind classes and styles, but in "Elements" tab on production page there were no computed styles for the elements.
One of additional symptoms were bunch of errors in the console:

Uncaught SyntaxError: Unexpected token '<'

The issue was that I didn't add any matchers to the middleware that should bypass redirection.
i.e.

export const config = {
matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
}

should solve the issue.
The reason, as I've got it right, was that whenever the server was trying to get the

/_next/static/css/5c3693b607e2a91e.css

file, it was redirected inside my middleware function.
Also, since the middleware is declared only once for the whole app, these checks can be used inside default exported function without exporting the config (may be you need to process some of the paths above)

Hope this helps

[polgiron]

the css was not loading for me either in prod
I've fixed my issue by simply renaming my folder "styles" by something else like "css" and then updating the import in the layout.tsx file, import '../css/globals.css' instead of import '../styles/globals.css'
I am guessing my issue was some weird cache/state error in tailwind