Tailwind css not work on Vercel after build and deploy it-CodePudding

I am using Tailwind CSS to style my web app, In local, it works perfectly but when I build my GitHub repository and deploy it on Vercel, it does not work, where is the problem with this?

one of my col:

<div
        className={`${classes.allTechnicalList} flex flex-wrap items-center justify-center px-0`}
 >
<Col
   lg={2}
   md={6}
   sm={6}
   xs={12}
   className={`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}
        >
   <div className="imgBorder text-center rounded-lg shadow  block flex-wrap justify-center items-center px-5 pt-8 pb-16 lg:mb-12 h-44 lg:w-48">
      <Image
          className="max-w-full h-full m-auto"
          alt=""
          src="/php-icon.png"
       />
       <p className="text-sm space-x-1 m-0 pt-2 pb-4">PHP</p>
    </div>
 </Col>
  .
  .
  .

In local:

After build and deploy it on Vercel:

As you see, in local the col display is flex but on the server, it is not.

This is my taiwlind config:

module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*. 
{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
  transitionDuration: ["hover", "focus"],
},
fontSize: {
  sm: ["15px"],
  base: ["16px", "24px"],
  lg: ["25px", "28px"],
  xl: "40px",
},
},
variants: {
extend: {},
},
corePlugins: {
  container: false,
},
plugins: [
 function ({ addComponents }) {
  addComponents({
    ".container": {
      maxWidth: "100%",
      "@screen sm": {
        maxWidth: "600px",
      },
      "@screen md": {
        maxWidth: "765px",
      },
      "@screen lg": {
        maxWidth: "1320px",
      },
      "@screen xl": {
        maxWidth: "1320px",
      },
    },
  });
},
],
};

this is postccs.config.js:

module.exports = {
plugins: [
"tailwindcss",
"postcss-flexbugs-fixes",
[
  "postcss-preset-env",
  {
    autoprefixer: {
      flexbox: "no-2009",
    },
    stage: 3,
    features: {
      "custom-properties": false,
    },
  },
],
],
};

CodePudding user response：

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.

CodePudding user response：

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: [],
}```

CodePudding user response：

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

CodePudding user response：

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:

Create a new export using npm run build && npm run export
Serve the export, you can either do this by using a simple http server or tools like hot-reload-server
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.