Error: addUtilities({ '@media (min-width: 640px)' : … }) defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. .scrollbar-none.

[marrobHD]

Hi,

after upgrading tailwindcss, daisyUI failes to compile.

I cannot find "@media (min-width: 640px)" in my code...

How can I fix it?

   ▲ Next.js 15.1.7

   Creating an optimized production build ...

🌼   daisyUI 4.12.23
Failed to compile.

./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
Error: `addUtilities({ '@media (min-width: 640px)' : … })` defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. `.scrollbar-none`.
    at Object.addUtilities (/home/may/git/kuzu.sh/kuzu.sh/node_modules/tailwindcss/dist/lib.js:19:3475)
    at Object.addComponents (/home/may/git/kuzu.sh/kuzu.sh/node_modules/tailwindcss/dist/lib.js:19:5785)
    at mainFunction (/home/may/git/kuzu.sh/kuzu.sh/node_modules/daisyui/src/index.js:57:3)
    at Ur (/home/may/git/kuzu.sh/kuzu.sh/node_modules/tailwindcss/dist/lib.js:25:2050)
    at jr (/home/may/git/kuzu.sh/kuzu.sh/node_modules/tailwindcss/dist/lib.js:25:1072)
    at async Ir (/home/may/git/kuzu.sh/kuzu.sh/node_modules/tailwindcss/dist/lib.js:33:99)
    at async Fr (/home/may/git/kuzu.sh/kuzu.sh/node_modules/tailwindcss/dist/lib.js:33:970)
    at async lt (/home/may/git/kuzu.sh/kuzu.sh/node_modules/@tailwindcss/node/dist/index.js:10:3272)
    at async p (/home/may/git/kuzu.sh/kuzu.sh/node_modules/@tailwindcss/postcss/dist/index.js:8:3242)
    at async Object.Once (/home/may/git/kuzu.sh/kuzu.sh/node_modules/@tailwindcss/postcss/dist/index.js:8:3422)

Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
./app/globals.css

package.json:

{
  "name": "kuzu.sh",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "convert-layout": "^0.11.1",
    "next": "15.1.7",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "sharp": "^0.33.5"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.0.6",
    "@types/convert-layout": "^0.5.3",
    "@types/node": "^22.13.4",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "daisyui": "^4.12.23",
    "eslint-config-next": "^15.1.7",
    "eslint-config-prettier": "^10.0.1",
    "postcss": "^8",
    "prettier": "^3.5.1",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwindcss": "^4.0.6",
    "typescript": "^5.7.3"
  }
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      animation: {
        mushroom: 'extend 1s 1, rotate 1s 1s infinite',
        spinrecord: 'spinrecord 6s linear infinite',
      },
      keyframes: {
        extend: {
          from: { transform: 'scale(1)' },
          to: { transform: 'scale(2) rotate(-15deg)' },
        },
        rotate: {
          '0%, 100%': { transform: 'rotate(-15deg) scale(2)' },
          '50%': { transform: 'rotate(15deg) scale(2)' },
        },
        spinrecord: {
          from: { transform: 'rotate(360deg)' },
          to: { transform: 'rotate(0deg)' },
        },
      },
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },
      borderWidth: {
        6: '6px',
      },
      lineHeight: {
        1: '0.8',
      },
    },
  },
  plugins: [
    require('daisyui'),
    // require("./plugins/kuzu.js"),
  ],
  daisyui: {
    themes: [
      {
        kuzu: {
          primary: '#a991f7',
          secondary: '#2F4858',
          'secondary-content': '#7A7694',
          accent: '#37cdbe', // TODO
          'neutral-content': '#A78DAC',
          info: '#ffc38d',
          neutral: '#FFC0CB', // Neutral color // neutral content base100
          'base-100': '#D4A5BE', // Base color of page, used for blank backgrounds
          'base-content': '#515F78', // Base color of page, used for blank backgrounds
          background: '#ffffff',
        },
      },
      'dark',
      'cupcake',
    ],
  },
}

module.exports = config

[marrobHD]

Wrong channel...
Posted it here: saadeghi/daisyui#3510