I’ve got a <div> which is toggling between translate classes like so:
<div class={`w-96 fixed top-16 bottom-0 left-0 transition-transform -translate-x-${show ? '0' : '96'}`}>
And Tailwind is just not applying this style, and I don’t understand why. The class is added to the element, but not the styling.
The styling for all the other classes is added, except for -translate-x-96.
This is my app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
>Solution :
Tailwind v3 generates styles for classes it finds by scanning the files specified in content field in tailwind.config.js. This means that the classes should be present in the code as-is and should not be constructed by concatenation.
From https://tailwindcss.com/docs/content-configuration#class-detection-in-depth:
The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.
The fix in this case is to specify the full class name in both branches of the ternary operator:
`${show ? '-translate-x-0' : '-translate-x-96'}`