Tailwind css not work on Vercel after build and deploy it

I assume that your project is based on React.

You can't "npm run start" to compile assets in real-time on the server, you can only do this on localhost. Instead, you have to run "npm run build" and deploy the resulting build folder with compiled assets on the server.

You should deploy just the "build" folder on the server and no other file.

Also, be sure to review the Tailwindcss installation process entirely to make sure that you changed scripts to correctly include Tailwind, here's a link to the official documentation (Reactjs section): https://tailwindcss.com/docs/guides/create-react-app

Bonus: clear server cache, maybe is the only thing you have to do.

• check if tailwind is included in dependencies not devDependencies
• run npm build once and see if there is a problem in the build
• check tailwind docs and confirm you have tailwind config files with purge mode the way they recommend like:

module.exports = {
  purge: [
   // "./src/**/*.html",
   // "./src/**/*.vue,
   // "./src/**/*.jsx"
  ],
  theme: {},
  variants: {},
  plugins: [],
}```

1. Check if you included tailwind as a devdependency.
2. Check if there's any error like variables being undefined which is causing something not rendered.

This is likely happening because of purging, tailwind has a feature where it purges out classes which aren't used in the project.

To verify if this is the case, and to rule out Vercel as the point of issue you can:

1. Create a new export using npm run build && npm run export
2. Serve the export, you can either do this by using a simple http server or tools like hot-reload-server
3. Test it out locally

If you see the same classes missing locally as well then it is for sure caused by the following line;

{`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}

You see when you load css as a module(next.js feature), if you then use concatenation to generate a dynamic string mixed of moduleClasses and static classes, tailwind misses that dynamic import, since it doesn't understand how next.js builds a random classname for each file imported as a module, if you inspect any next.js dom, you'll see your classes having their name attached with some hash/random string.

If you import a file called LoginPage.scss and use it's loginButton class,

import loginStyles from 'styles/LoginPage.scss'

function fun() {
  return <>
    <button className={loginStyles.loginButton}>Login</button>
  </>
}

The class that will be generated by next will look something like LoginPage_LoginButton__1Auw8, basically {moduleName}_{className}_{randomString}.

In order to fix this; you need to have a single module class attached to each className prop, so that tailwind can infer the classes properly, break the static classes and module class into two different divs applying the styles accordingly.

<!-- wrong method -->
<div className={`mx-auto font-lato ${myModule.myClass}`}></div>

<!-- right method, use encapsulating divs to have one moduleClass passed as a single prop -->
<div className={`mx-auto font-lato`}>
  <div className={myModule.myClass}>
  </div>
</div>

In case these classes have to be applied to the same div, consider creating a new class inside your style module and just import it directly.

Read more about writing purgeble HTML

@tailwind base;
@tailwind components;
@import "xxxx.css";
@tailwind utilities;

I put custom .css file before @tailwind utilities; and the style display normal. I'm also curious as to why this works. Brothers who know it can tell me.

Add the following line in module.exports in tailwind.config.js:

important: true

if you are facing this issue in nextjs

Navigate to tailwind.config.ts and replace the line below and replace the content

  content: [
    "./Components/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],

In tailwind.config.js change on line 5:

"./src/components/**/*.{js,ts,jsx,tsx,mdx}",

to

"./src/Components/**/*.{js,ts,jsx,tsx,mdx}",