CODEWITHSUNDEEP
csssasscss-selectorstailwind-css
varunkasyap
varunkasyap

Reputation: 1

NextJS tailwind CSS problem --- The `shadow-[inset_10px_-50px_94px_0_rgb(199,` class does not exist

My next.js app is throwing this css error

Syntax error: C:....styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:5)

109 | 110 | .copy_btn {

111 | @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur flex justify-center items-center cursor-pointer; | ^ 112 | } 113 | -- inner error -- Syntax error: C:....styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:5)

109 | 110 | .copy_btn {

111 | @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur flex justify-center items-center cursor-pointer; | ^ 112 | } 113 |

image

i want this to get solved

Upvotes: 0

Views: 65

Answers (1)

Sanket Sapate
Sanket Sapate

Reputation: 106

It seems that Tailwind is not able to process the provided class.

This is mainly because you are adding whitespaces while setting rgb() value.

It will confuse tailwind and consider shadow-[inset_10px_-50px_94px_0_rgb(199, , 199, and 0.2)] as separate classes.

To avoid this underscore can be used. Follow this docs

Or in this case simply remove the whitespaces.
shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)]

Upvotes: 0

Related Questions