Tailwind Not Working in Production Mode with Next.js Build

[currenthandle]

The following tailwind className assignment works correctly when running the server in development mode only, but DOES NOT work in production:

<Link href='#pop' className='w-full text-black no-underline'>

Specifically, the class no-underline becomes: text-decoration-line: none; as shown by the Chrome dev tools. But when I run the following from the command like NODE_ENV=production npm run build && npm start now the same element has text-decoration: underline; where it was text-decoration-line: none; before when running the dev server build.

This results in a UI bug where the anchor tag is no longer rendering correctly, as it did in development.

I followed the tailwind installation docs but it's not working as expected: https://tailwindcss.com/docs/guides/nextjs

Digging around has led me to a number of posts and articles talking about purge I've experimented with a number of different configurations, mostly content/purge in tailwind.config.js but I haven't been able to improve the situation. Though I have been able to make the situation worse, ie break the UI even more by changing the entries in the content array in tailwind.config.js

MY CODE

// tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

/* global.css */

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

@layer base {
  body {
    height: 100vh;
  }
  .section-title {
    @apply font-bold pb-3 text-2xl;
  }
  .section {
    @apply py-6;
  }

  .discog-box {
    @apply bg-white p-3 flex content-center flex-col;
  }

  .text-shadow-custom {
    text-shadow: 2px 2px 4px #000;
  }
}

Full codebase: https://github.com/currenthandle/tunester/blob/no-moralis/components/IndexPageSideBar.js#L18

There are several other tailwind className assignments that are not working correctly. For this reason, when I deploy my app to Vercel, in this case, the UI is totally broken: https://tunester-8f737wgsk-currenthandle.vercel.app/

[Markos-Th09]

The class from material ui comes after your no-underline in production the tailwind class has no effect. I don't know why this is happening but it is a material ui problem not a tailwind problem.

[alvaropsouza]

That solved my problems, i was using some components from MUI and never thought it was causing this. Used normal tags instead and worked like a charm.

[currenthandle]

I started a new project from scratch with no material-ui and only tailwindcss, and I see the same issue as before. When I deploy my code or a run production build locally, the styling breaks down.

Look at the screenshots, in development the highlighted span has a width across the viewport/page. In production, the same span tag has the same classes and apparently, the same styles are applied, however, it's narrower than the page. If I set width: 100%;, manually in the styles the container-span becomes the width of the page and the image it contains looks correct.

The primary issue is that it's impossible to style a page if it's going to look different once it's up and running. Does anyone know what's going on here or how to address this?

Development:

Production:

// Rectangle.js
// the component shown in the screenshots

import Image from 'next/image';
import dynamic from 'next/dynamic';

const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });

export default function Rectangle({ verticle, asset: { attributes: asset } }) {
  let image = null;
  if (asset.video) {
  } else {
    image = asset.image.data.attributes;
  }
  return (
    <div
      className={`${
        !verticle ? 'w-full flex' : 'w-6/12 flex'
      } relative  justify-center 2xl:h-[500px] xl:h-[450px] lg:h-[400px] md:h-[300px] h-[200px] overflow-hidden`}
    >
      {!asset.video ? (
        <Image
          objectFit='cover'
          height={image.height}
          width={image.width}
          src={
            process.env.NODE_ENV === 'development'
              ? `http://localhost:1337${image.url}`
              : `https://cryptic-cove-11110.herokuapp.com${image.url}`
          }
          alt={image.title}
          className='w-full overflow-hidden'
        />
      ) : (
        <ReactPlayer
          url='https://player.vimeo.com/video/290582899?h=41ed9d7a84'
          controls={true}
          autoplay={true}
        />
      )}
    </div>
  );
}

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['localhost', 'cryptic-cove-11110.herokuapp.com'],
  },
};

module.exports = nextConfig;

[jamp-scp28]

Hi @currenthandle, did you manage to solve this issue? I am having the same problem when deploying my nextjs app to github-pages and even Vercel, it looks like tailwind is not compiling; I do not know but somehow it works fine on firebase hosting but it lacks of environment variables so not an option.

My tailwind configuration looks like this:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  safelist: ['outline-none'],
  theme: {
    extend: {
      backdropBlur: {
        xs: '1px',
      },
      dropShadow: {
        'project': '4px 4px 4px rgba(0,0,0,1)',
        'white': '0 15px 15px rgba(255,255,255,0.3)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
      colors: {
        george: '#1d1d1d',
        green: '#b4f95f',
        yellow: '#ffe875',
        greyDark0: '#9b9b9b',
        greyBlack: '#121212',
        greyDark: '#112222',
        greyDark1: '#414141',
        greyDark2: '#282828'
        
      },
      textColor: {
        base: 'var(--text-base)',
        primary: 'var(--text-primary)',
        secondary: 'var(--text-secondary)',
      },
      boxShadow: {
        'outline-normal': '0 0 0 2px var(--accent-2)',
        magical:
          'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
      },
      lineHeight: {
        'extra-loose': '2.2',
      },
      scale: {
        120: '1.2',
      },
    },
  },
}

[joergrech]

I have a similar problem with text-white - it shows normally in nextjs development mode but in production the color is gone (not part of the compiled css). I'm using postcssand no color themes in tailwind.config.js

Any ideas how to fix this?

[TheBlapse]

@joergrech Were you able to find a solution?

[joergrech]

Not 100% sure if this was the problem but Nextjs only includes classes that it can explicitly find in the compiled css (during build for production). You can define colors / classes explicitly that will be bundled into the css by using safelist in tailwind.config.js, e.g.,

  safelist: [
    "bg-red-500"
  ]

[jamp-scp28]

Hi guys! I tried many things to try fixing the issue, I guess I was missing some configuration in my project, ended up using the configuration of riipandi, and migrating everything to the template, after deploying everything was working.

[tjdibbs]

I added important to be true in the tailwind configuration file

module.exports = {
    important: true,
    ....
} 

when I inspected the elements I found out some top-level CSS is overriding tailwindcss

[natanlf]

It works for me. Thanks

[Lebraz98]

thanks works in nextjs 13

[MohammadKhaleghii]

thanks, it works for me.

[ImJoshiANE]

It also worked for me. Thanks :)

[definitelytheking]

UPPPP!!1 THIS ALSO WORKS FOR ME

[ehtsham623]

I had issue where height class of tailwind working fine in dev env but in production it wasn't working.

Fix..

Open tailwind.config.js Inside module.export add all folders that contain tailwind classe like this

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layouts/**/*.{js,ts,jsx,tsx}",
  ], 
};

I created layout folder and added some layout here with tailwind css. But this wasn't added in config file thats why i was having this issue . Issue fixed after adding layout folder in config files.

Note
layout folder was added in root directory outside of component or pages folder

[jorawarSinghNijjar]

Thank you for informing about that. It worked for me.

[alihaghjou]

hi guys i had the same problem with some tailwind styles not applying in production. i think i solved it for now.
by moving the classes that are not working to a css sheet and using @apply it will work on production.

or go to this commit and see the changes i made:
alihaghjou/linktree@a699819

[Coder-Devesh-Agarwal]

Hey everybody Just Prod tailwindcss official you first need to build a CSS file put it in the styles folder and then import it instead of globals.css after this there will be no issue

actually, this happens because tailwindcss build command is not being run there on the hosting platform as it's not specified in the packages.json file

I hope it helps

if yes then please follow for more such tips and help

[waynetunmyint]

I might be late but here is how to get it working

After configuration is completed using this tutorial .

https://tailwindcss.com/docs/guides/nextjs

go to your package.json

"scripts": {
"build": "next build && npx tailwindcss -o build.css --minify",
},

build should be like this . this will create build.css if you run "npm run build" command

use that build.css file in App/layout.tsx like this

import "../build.css"

then it should work, dont worry about configuration much. First tutorial link is enough.