CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Zia Yamin
Zia Yamin

Reputation: 1004

Tailwind css not work on Vercel after build and deploy it

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: enter image description here

After build and deploy it on Vercel: enter image description here

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,
    },
  },
],
],
};

Upvotes: 2

Views: 8134

Answers (9)

Raju
Raju

Reputation: 1

In tailwind.config.js change on line 5:

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

to

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

Upvotes: 0

Zain Waseem
Zain Waseem

Reputation: 27

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}",
  ],

Upvotes: 0

Leopard2A7
Leopard2A7

Reputation: 1

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

important: true

Upvotes: 0

Dinh-Bac Nguyen
Dinh-Bac Nguyen

Reputation: 93

Replace purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"] by purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./Components/**/*.{js,ts,jsx,tsx}"] (components should have the 'C' capital)

Upvotes: 3

jiakai
jiakai

Reputation: 91

@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.

Upvotes: 0

Shuvojit
Shuvojit

Reputation: 1470

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

Upvotes: 0

John Hugh
John Hugh

Reputation: 11

  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.

Upvotes: 0

jainChetan81
jainChetan81

Reputation: 147

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

Upvotes: 0

Francesco
Francesco

Reputation: 111

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.

Upvotes: 0

Related Questions