0
    <img
      src={project.image.fields.file.url}
      className={"hover:translate-y-[-" + 10 + "%]"}
    />

I try to translate y based on a variable, or hardcoded number, this doesn't work and idk why but this does

    <img
      src={project.image.fields.file.url}
      className={"hover:translate-y-[-10%]"}
    />

Doesn't really makes sence to me but idk, What do you think?

CatalinPCE
  • 21
  • 5
  • 1
    That’s not supported. See dynamic class names in the [docs](https://tailwindcss.com/docs/content-configuration). – ayhan Jun 10 '23 at 16:36

1 Answers1

2

As per the documentation:

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:

Don’t construct class names dynamically

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

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

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

You could use the style attribute for truly dynamic properties:

<img class="hover:translate-y-[--y]" style={{ '--y': `-${10}%` }} />
Wongjn
  • 8,544
  • 2
  • 8
  • 24