Custom boxShadow not working when extend the theme using tailwind.config.js

[Chandu4221]

What version of Tailwind CSS are you using?
^3.4.10

What build tool (or framework if it abstracts the build tool) are you using?
"vite": "^5.4.1" "postcss": "^8.4.41" "tailwindcss": "^3.4.10"

What version of Node.js are you using?
node - v20.12.2 npm:10.5.2

What browser are you using?
Chrome - 124.0.6367.61

What operating system are you using?
Windows 10

Reproduction URL

package.json dependencies and dev dependencies

{
 "dependencies": {
    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.436.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/node": "^22.5.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
  }

Tailwind Playground working here

Describe your issue
I am using create vite@latest with react-ts and installed shadcn-ui

I have tried extending the boxShadow class in the tailwind.config.js (refer below image)

I am also getting suggestion in vscode when i hover on the class pop up with the css rule is shown (refer below image)

but when i inspect the element on webpage my custom shadow class is missing (refer below image)

---

When i modify the key in tailwind.config.js (refer below image)

and apply the class to my component

and inspect the component in web page (refer below image)
it is working as expected.

[wongjn]

It could be that you'd need to configure tailwind-merge to understand your custom class name in the Card component. This is so that it can merge the class name list properly.

[Chandu4221]

@wongjn Why is 4xl working without configuring tailwind-merge, but brutal is not?. Please explain.

[wongjn]

Perhaps tailwind-merge has some built-in heuristics that interprets 4xl differently to brutal.

[LinThitHtwe]

How about adding important in there ?

!shadow-brutal

[david-ouatedem]

What version of Tailwind CSS are you using? ^3.4.10

What build tool (or framework if it abstracts the build tool) are you using? "vite": "^5.4.1" "postcss": "^8.4.41" "tailwindcss": "^3.4.10"

What version of Node.js are you using? node - v20.12.2 npm:10.5.2

What browser are you using? Chrome - 124.0.6367.61

What operating system are you using? Windows 10

Reproduction URL

package.json dependencies and dev dependencies

{
 "dependencies": {
    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.436.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/node": "^22.5.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
  }

Tailwind Playground working here

Describe your issue I am using create vite@latest with react-ts and installed shadcn-ui

I have tried extending the boxShadow class in the tailwind.config.js (refer below image)

I am also getting suggestion in vscode when i hover on the class pop up with the css rule is shown (refer below image)

but when i inspect the element on webpage my custom shadow class is missing (refer below image)

When i modify the key in tailwind.config.js (refer below image)

and apply the class to my component

and inspect the component in web page (refer below image) it is working as expected.

Your class shadow-blue-300 is overwriting the class shadow-brutal remove it

[Chandu4221]

@david-ouatedem shadow-blue-300 this just adds shadow color. Please refer BoxShadow Docs, also check the working example attached

[david-ouatedem]

I say it overwrites because when I tried your example the style for shadow-brutal did not apply when I had shadow-blue-300. I don't know how tailwindcss handles the merging of custom styles from tailwind.config.ts and tailwind classes but that is how it worked for me
NB: we have the same versions of tailwind-related dependencies

[Chandu4221]

@david-ouatedem have you tried shadow-4xl example ? it works as expected. My class shadow-brutal just adds a shadow to the component, while shadow-blue-300 sets the shadow color.

The Tailwind CSS plugin usually warns when trying to modify the same property with two classes (CSS conflict, i have used shadow-blue-300 and shadow-red-300 trying to modify same css property), but that’s not happening in my shadow-brutal case. My shadow-brutal class adds the shadow, and shadow-blue-300 sets the shadow color.
(refer below image)