score:0

As Renato mentioned in his answer, it seems dynamically constructing tailwind class names returns this error.

This is explained in the tailwind docs here:

Dynamic class names

As outlined in Class detection in-depth, Tailwind doesn’t actually run your source code and won’t detect dynamically constructed class names.

❌ Don't construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

✔️ Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Also from this documentation about how tailwind detects CSS class names:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS

Therefore to dynamically set a CSS property of an element, using the inline style provided by React.js would be the best way to do it. For example:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

score:1

Today I had the same problem. My code was working just fine, until I created a React component that had a function that uses querySelector, something like this:

const handleSomething = () => {
  const x = 150;

  let activeSlide = document.querySelector('.slide');
  activeSlide.classList.add(`-translate-x-[${x}]`);
}

It seemed that the -translate-x-[${x}] statement was causing the bug. However, after removing this line, the problem didn't go away. I tried to delete the "node_modules" and ".next" folders and reinstall the dependencies, but nothing seemed to work.

I don't know what caused it, but the only way I could get the application to run again was to go back to the previous commit (with a git reset --hard HEAD - WARNING: be careful with this command because you loose all uncommitted changes, but that was my intention) and delete that component (the file itself). Even a simple copy and paste of the contents of this file, with most of the "weird" lines commented out (this function, basically), would make the error come back. Literally nothing else seemed to work for me.

It probably doesn't answer your question, but I hope it can help someone who is facing the same problem, until no better solution comes up.


Related Query

More Query from same tag