Button's text color comes from --color-base-content and not from --color-primary-content #4206

mrksph · 2025-10-21T18:47:14Z

mrksph
Oct 21, 2025

As the title says. I was trying to create my own custom theme. I've configured the colors (primary, primary-content, secondary, secondary-content, etc...)

When I add a sample button in my NextJS app like: Test and inspect it in Chrome's DevTools, I see the element color property value comes from --color-base-primary and not from --color-primary-content as I'd expect.

Any help here?

pdanpdan · 2025-10-21T18:53:13Z

pdanpdan
Oct 21, 2025

Check the classes that are applied on the button

Btw, are you using turbo pack?
#4193 (comment)

1 reply

mrksph Oct 21, 2025
Author

~~Yes, Im using turbopack~~

EDIT: No, Im not using turbopack

saadeghi · 2025-10-21T19:17:21Z

saadeghi
Oct 21, 2025
Maintainer

A reproduction link would help finding the problem

6 replies

saadeghi Oct 21, 2025
Maintainer

A Tailwind Play link would be enough
https://daisyui.com/tailwindplay/

mrksph Oct 21, 2025
Author

It's weird, in the Tailwind Play I can see my theme showing correctly

https://play.tailwindcss.com/s10P9t8eaS?file=css

mrksph Oct 21, 2025
Author

I dont know why it's not picking up the --color-primary-content for

<button className="btn btn-primary>Primary</button>

layout.jsx

export default function RootLayout({children}) {
  return (
    <html data-theme="light">
    <body>
    {children}
    </body>
    </html>
  );
}

page.jsx

export default function Home() {
  return (
    <div>
      <button className="btn btn-primary">Primary</button>
    </div>
  );
}

global.css

@import "tailwindcss";
@plugin "daisyui" {
    themes: light --default, dark --prefersdark, cupcake;
}

package.json (Im using turbopack now, previously wasn't)

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "node .next/standalone/server.js",
    "lint": "biome check",
    "format": "biome format --write"
  },
  "dependencies": {
    "next": "15.5.6",
    "postcss": "^8.5.6",
    "react": "19.1.0",
    "react-dom": "19.1.0"
  },
  "devDependencies": {
    "@biomejs/biome": "2.2.0",
    "@tailwindcss/postcss": "^4.1.15",
    "daisyui": "^5.3.7",
    "tailwindcss": "^4.1.15"
  },
  "browserslist": [
    "> 1%"
  ]
}

mrksph Oct 21, 2025
Author

Now, after stopping the application, deleting node_modules/ and starting it again the button works as expected:

If I update global.css with my theme, it won't pick up the primary color content.

mrksph Oct 21, 2025
Author

When I add some content to the page.jsx, it stops picking up the right color, instead of picking up --color-primary-content it only uses --color-base-content

mrksph · 2025-10-21T20:32:14Z

mrksph
Oct 21, 2025
Author

Please help, this is driving me crazy

0 replies

pdanpdan · 2025-10-21T20:44:41Z

pdanpdan
Oct 21, 2025

Ha, guess what, it's just a broken version of tailwind :(
4.1.11 is working
bisecting versions now

"@tailwindcss/vite": "=4.1.15", is broken
"@tailwindcss/vite": "=4.1.14", is working

@saadeghi does anything from the changelog trigger an ideea?
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.1.15

0 replies

saadeghi · 2025-10-21T20:55:52Z

saadeghi
Oct 21, 2025
Maintainer

I couldn't reproduce the issue.
but this is invalid markup. missing " @mrksph

<button className="btn btn-primary>Primary</button>

21 replies

mrksph Oct 23, 2025
Author

So, what does this means? Should I stick with a earlier version of DaisyUI/TailwindCSS/PostCSS?

saadeghi Oct 23, 2025
Maintainer

This must be fixed in the latest version of Tailwind CSS today

mrksph Oct 23, 2025
Author

Nice, will test later today then. Thank you guys for your quick answers.

mrksph Oct 23, 2025
Author

Nah still not working as expected, wtf

btn btn-primary text color is base content instead of color primary content

{
  "name": "multiexpress-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "node .next/standalone/server.js",
    "lint": "biome check",
    "format": "biome format --write"
  },
  "dependencies": {
    "clsx": "^2.1.1",
    "next": "15.5.6",
    "react": "19.1.0",
    "react-dom": "19.1.0"
  },
  "devDependencies": {
    "@biomejs/biome": "2.2.0",
    "@tailwindcss/postcss": "4.1.16",
    "daisyui": "5.3.8",
    "postcss": "8.5.6",
    "prettier": "^3.6.2",
    "prettier-plugin-tailwindcss": "^0.7.1",
    "tailwindcss": "4.1.16"
  },
  "browserslist": [
    "> 1%"
  ]
}

mrksph Oct 23, 2025
Author

Going to stick with Tailwind/PostCSS 4.1.6 and DaisyUI 5.0.43 for now until you guys fix this

Uh oh!

Button's text color comes from --color-base-content and not from --color-primary-content #4206

Uh oh!

mrksph Oct 21, 2025

Replies: 5 comments · 28 replies

Uh oh!

Uh oh!

pdanpdan Oct 21, 2025

Uh oh!

Uh oh!

mrksph Oct 21, 2025 Author

Uh oh!

saadeghi Oct 21, 2025 Maintainer

Uh oh!

saadeghi Oct 21, 2025 Maintainer

Uh oh!

mrksph Oct 21, 2025 Author

Uh oh!

Uh oh!

mrksph Oct 21, 2025 Author

Uh oh!

mrksph Oct 21, 2025 Author

Uh oh!

mrksph Oct 21, 2025 Author

Uh oh!

mrksph Oct 21, 2025 Author

Uh oh!

Uh oh!

pdanpdan Oct 21, 2025

Uh oh!

saadeghi Oct 21, 2025 Maintainer

Uh oh!

mrksph Oct 23, 2025 Author

Uh oh!

saadeghi Oct 23, 2025 Maintainer

Uh oh!

Uh oh!

mrksph Oct 23, 2025 Author

Uh oh!

mrksph Oct 23, 2025 Author

Uh oh!

mrksph Oct 23, 2025 Author

mrksph
Oct 21, 2025

Replies: 5 comments 28 replies

pdanpdan
Oct 21, 2025

mrksph Oct 21, 2025
Author

saadeghi
Oct 21, 2025
Maintainer

saadeghi Oct 21, 2025
Maintainer

mrksph Oct 21, 2025
Author

mrksph Oct 21, 2025
Author

mrksph Oct 21, 2025
Author

mrksph Oct 21, 2025
Author

mrksph
Oct 21, 2025
Author

pdanpdan
Oct 21, 2025

saadeghi
Oct 21, 2025
Maintainer

mrksph Oct 23, 2025
Author

saadeghi Oct 23, 2025
Maintainer

mrksph Oct 23, 2025
Author

mrksph Oct 23, 2025
Author

mrksph Oct 23, 2025
Author