translate-x-full not working

[ratzo]

Hi,

I'm trying tailwinds replicating some of Adam's examples and I stumbled on this issue.

On this demo https://polished-sunset-0ex44e5cb9xt.tailwindcss.com/components/198272c2-e9b3-46e5-99da-d0911ad1e07c Adam's using -translate-x-full class to hide the sidebar menu on mobile devices. On the demo this class has transform: translateX(-100%);. But in my code, using tailwinds 1.4.6, this class has --transform-translate-x: -100%; css, and is not working to hide the sidebar menu in my example.

Is there a configuration that I should apply to generate the right css?

I have this in my app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

and this in my tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

TIA

[florianbouvot]

@ratzo you need to use transform classe with any translate classes: https://tailwindcss.com/docs/translate#usage

[ratzo]

thank you, that really did the trick

[Adimvicky]

Thanks @florianbouvot. Your answer just helped me!