reactjsnext.jstailwind-cssdaisyui

'picker' is not recognized as a valid pseudo-element

im pretty new in web development and im making a project, i wanted to use the fab component from daisyui but it wasnt working properly and so i though it my be a version issue, i update my version "daisyui": "^5.0.9" -> latest ,after that i got this error

Parsing css source code failed
  1488 |       }
  1489 |       @supports (appearance: base-select) {
1490 |         &::picker(select) {
       |                    ^
  1491 |           appearance: base-select;
  1492 |         }
  1493 |       }

'picker' is not recognized as a valid pseudo-element. Did you mean ':picker' (pseudo-class) or is this a typo? at [project]/app/globals.css:1489:19

ive delete node_modules, and package-lock.json, did npm install (when i updated daisyui i didnt use the --save on the command so it doesnt change my package.json file) , but still the issue persists, im at a loss i dont know how to fix it , can anyone help?

my package.json

{
  "name": "nutri-crm",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@supabase/ssr": "^0.6.1",
    "@supabase/supabase-js": "^2.49.1",
    "axios": "^1.8.4",
    "chart.js": "^4.5.0",
    "daisyui": "^5.0.9",
    "dayjs": "^1.11.13",
    "framer-motion": "^12.11.1",
    "html2canvas-pro": "^1.5.11",
    "jspdf": "^3.0.1",
    "lucide-react": "^0.510.0",
    "next": "15.2.2",
    "openai": "^4.104.0",
    "react": "^19.0.0",
    "react-chartjs-2": "^5.3.0",
    "react-dom": "^19.0.0",
    "react-hot-toast": "^2.5.2"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/react": "19.0.12",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "tailwind-scrollbar-hide": "^2.0.0",
    "tailwindcss": "^4"
  },
  "browserslist": "> 1%"
}

my postcss.config.mjs

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

global.css

@plugin "daisyui";

* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* Hide scrollbar for WebKit browsers */
*::-webkit-scrollbar {
  display: none;
}

:root:has(
    :is(
        .modal-open,
        .modal:target,
        .modal-toggle:checked + .modal,
        .modal[open]
      )
  ) {
  scrollbar-gutter: unset !important;
}

textarea {
  resize: none;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}
Solution

  • According to a reported issue in Next.js, this is a LightningCSS bug (used under the hood by TailwindCSS (read more) and Next.js (read more)).

    Note: Since DaisyUI is not specifically tested on Next.js, only on TailwindCSS, it can be assumed at this point that the issue should be investigated in the Next.js version, as DaisyUI hasn't got this issue.

    Based on the PR merge, you need at least v1.30. You can check the installed version and why that particular version was installed:

    npm why lightningcss

    Next.js shipped the mentioned PR in v15.4.0-canary.32.

    Your installed version is v15.2.2 - updating to v15.4 (or latest) will likely resolve the issue.