Reproduction URL (Required)
https://stackblitz.com
What version of daisyUI are you using?
v5.0.9
Which browsers are you seeing the problem on?
Other
Describe your issue
Using the tabs-box class generates the following warning, when building :
WARN [vite:css][postcss] Parse error on line 1:
...calc(var(--radius-field) + var(--radius-field) + var(--radius-field)))
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
1 | /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2 | @layer theme{:root,:host{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(.577 .245 27.325);--color-orange-100:oklch(.954 .038 75.164);--color-orange-300:oklch(.837 .128 66.29);--color-orange-500:oklch(.705 .213 47.604);--color-orange-800:oklch(.47 .157 37.304);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-300:oklch(.905 .182 98.111);--color-yellow-800:oklch(.476 .114 61.907);--color-lime-100:oklch(.967 .067 122.328
// 210kb logs, I guess all minified css
I tried to reproduce, but Stackblitz template uses daisy 3 and I'm unable to make it work, browser crash - sorry for not giving the repro url.
Minimal repro (fresh nuxt + daisy ui 4 without nuxt/tailwindcss module, using daisy ui 4 doc to add it to nuxt3)*:
package.json
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxtjs/tailwindcss": "6.13.2",
"@tailwindcss/vite": "^4.0.16",
"nuxt": "^3.16.1",
"tailwindcss": "^4.0.16",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"daisyui": "^5.0.9"
}
}App.vue
<template>
<div class="p-4">
<h1>>Tabs-box issue</h1>
<div role="tablist" class="tabs tabs-box my-2">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>
</div>
</template>nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
vite: {
plugins: [tailwindcss()],
},
css: ["~/assets/app.css"],
})
Then npm run build produce the warning (impossible to read as it is +200kb long, had to output to a file to open it)
Seems linked to postcss/postcss-calc#77
And indeed, the tabs-box contain three additions in calc.
.tabs-box {
@apply bg-base-200 p-1;
border-radius: calc(
var(--radius-field) +
min(0.25rem, calc(var(--radius-field) + var(--radius-field) + var(--radius-field)))
);
// ...
NB: using @nuxtjs/tailwindcss module leads to the error. Don't know why, but seems not necessary as using vite directly works. Anyway that would be an issue for nuxt I guess
[unhandledRejection] Package subpath './resolveConfig' is not defined by "exports" in /home/shade/repo/sereniteo/score-portal/node_modules/tailwindcss/package.json
Reproduction URL (Required)
https://stackblitz.com
What version of daisyUI are you using?
v5.0.9
Which browsers are you seeing the problem on?
Other
Describe your issue
Using the
tabs-boxclass generates the following warning, when building :I tried to reproduce, but Stackblitz template uses daisy 3 and I'm unable to make it work, browser crash - sorry for not giving the repro url.
Minimal repro (fresh nuxt + daisy ui 4 without nuxt/tailwindcss module, using daisy ui 4 doc to add it to nuxt3)*:
package.json
{ "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "dependencies": { "@nuxtjs/tailwindcss": "6.13.2", "@tailwindcss/vite": "^4.0.16", "nuxt": "^3.16.1", "tailwindcss": "^4.0.16", "vue": "^3.5.13", "vue-router": "^4.5.0" }, "devDependencies": { "daisyui": "^5.0.9" } }App.vue
nuxt.config.ts
Then
npm run buildproduce the warning (impossible to read as it is +200kb long, had to output to a file to open it)Seems linked to postcss/postcss-calc#77
And indeed, the tabs-box contain three additions in calc.
NB: using @nuxtjs/tailwindcss module leads to the error. Don't know why, but seems not necessary as using vite directly works. Anyway that would be an issue for nuxt I guess