Tailwind CSS and DaisyUI UI bug in Production [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 3 months ago.

Improve this question

The layout and design is different in production mode and some components are not visible even though they are there in dev mode and when I npm build, as well as when I inspect them on browser.

Package versions:

"tailwindcss": "^3.4.17"
"daisyui": "^5.0.50",
"postcss": "^8.5.4"

Dev Mode

Production (I use Vercel)

I tried modifying the tailwind.config.js a couple of times. All my components folders are in lowercase. This is tailwind.config.js:

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

  theme: {
    extend: {
      fontFamily: {
        bebas: ['"Bebas Neue"', "sans-serif"],
        dmsans: ['"DM Sans"', "sans-serif"],
      },
    },
  },
  plugins: [require("daisyui")],
};

This is the Dashboard code:

export default async function Dashboard() {
  return (
    <div className="tabs tabs-lg tabs-border w-full">
      <input
        type="radio"
        name="my_tabs_6"
        className="tab"
        aria-label="Truck Drivers"
        defaultChecked
      />
      <div className="tab-content border-base-300 ">
        <div className="bg-base-100 p-3 flex md:justify-between justify-center items-center space-x-4 md:space-x-2 lg:space-x-1  ">
          <FloatingActionButton className="lg:hidden block custom-fab-class" />
        </div>
        {/* hardcoded */}
        <div className="h-[calc(100vh-18rem)] bg-base-100 p-4 overflow-auto">
          <Suspense fallback={<div>Loading...</div>}>
            <DriverCards />
          </Suspense>
        </div>
      </div>
      <input
        type="radio"
        name="my_tabs_6"
        className="tab"
        aria-label="Trucks"
      />
      <div className="tab-content bg-base-100 border-base-300 p-6">
        <div className="flex justify-between items-center mb-4"></div>
        <Suspense fallback={<div>Loading...</div>}>
          <DriverCards />
        </Suspense>
      </div>
    </div>
  );
}

I have also tried setting it up based on docs but it completely wiped out my UI

It looks like the issue is with the background image, but this can't be reproduced with the source code - there's no place or setting for a photo in it. Could you share a working reproduction using play.tailwindcss.com? — rozsazoltan
– rozsazoltan, Commented Aug 22 at 8:45

rozsazoltan · Accepted Answer · 2025-08-22 08:57:44Z

You said you followed the DaisyUI v5 installation guide for Next.js, but that requires TailwindCSS v4. For TailwindCSS v3, use the DaisyUI v4 release.

The version numbers are linked because completely different integration is required for TailwindCSS v3 compared to v4. That's why DaisyUI provided a new stable release to signal the major breaking change.

Incorrect installation can result in improperly generated CSS.

TailwindCSS v3 (& DaisyUI v4)

Note: The guide is incorrect; you need daisyui@4 instead of daisyui@latest.

npm uninstall @tailwindcss/postcss
npm install tailwindcss@3 daisyui@4 postcss autoprefixer

# It also creates the tailwind.config.js and postcss.config.js files
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

globals.css

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

TailwindCSS v4 (& DaisyUI v5)

npm uninstall autoprefixer
npm install tailwindcss @tailwindcss/postcss postcss daisyui@latest

From v4 onward, there's no need to run the init command, and the tailwind.config.js file can also be removed.

If it exists, delete the postcss.config.js file and create a new postcss.config.mjs file with the following content:

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

globals.css

@import "tailwindcss";
@plugin "daisyui";

Collectives™ on Stack Overflow

Tailwind CSS and DaisyUI UI bug in Production [closed]

Package versions:

Dev Mode

Production (I use Vercel)

1 Answer 1

TailwindCSS v3 (& DaisyUI v4)

TailwindCSS v4 (& DaisyUI v5)

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Package versions:

Dev Mode

Production (I use Vercel)

1 Answer 1

TailwindCSS v3 (& DaisyUI v4)

TailwindCSS v4 (& DaisyUI v5)

Comments

Related