CODEWITHSUNDEEP
csstailwind-css
Mateusz Minder
Mateusz Minder

Reputation: 1

Failed to compile tailwind css custom class

I'm currently on the crash course of next.js, which uses medium package of custom classes for tailwind. The problem seems to relate with shadow properties of two custom classes I have, both with identical parameters. The example class looks like this:

.copy_btn { @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; }

And when running these, the compiler throws an error, saying:

Failed to compile ./styles/globals.css:111:3 Syntax error: C:...\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.

This error occured during the build and can only be dismissed by fixing the error.

I've tried to read the tailwind css documentation and the other people's similar problems, and it seems like this syntax was similar to mine. At least I think it was. The last thing I think is worth to mention, is that commenting the shadow part fixes the bug, so it should be related strict with this class. My configs seem fine, everything else seems fine at this point, but this.

Upvotes: 0

Views: 493

Answers (1)

Wongjn
Wongjn

Reputation: 24706

Classes in HTML are separated by spaces, thus this rule is implicit with the @apply syntax to match. Consider removing the spaces in the rgb() call like:

.copy_btn { @apply … shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] …; }

Or you could not use @apply at all like:

.copy_btn {
  @apply …;
  box-shadow: inset 10px -50px 94px 0 rgb(199, 199, 199, 0.2);
}

As an aside, you may also wish to avoid @apply altogether as recommended by Adam Wathan, creator of Tailwind:

  • https://twitter.com/adamwathan/status/1226511611592085504

    Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.

    You should almost never use it 😬

    Reuse your utility-littered HTML instead.

  • https://twitter.com/adamwathan/status/1559250403547652097

    I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no @​apply 😬

    The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.

Upvotes: 0

Related Questions