Enabling transition variant for margins in tailwindcss config

[altercode]

Hi,

I try to make a "read more" link with the icon on the right and add a behaviour when someone hover over the link
I want to increase a left margin of the link to smoothly slide a little bit to the right, but I cant figure it out
what I should enable in tailwind config to enable transitions for margins. Can someone please help me with this?

I have created example code on tailwind play:

https://play.tailwindcss.com/z99vtGtsms

[altercode]

I figured this out after I submitted the post. I should use transition-all class instead of transition!

[akshithere]

thanks mate it worked

[endepointe]

in your tailwind.config.js, add the following

  theme: {
    extend: {
      transitionProperty: {
        'spacing': 'margin, padding',
      }
    }
  },

Now you use the exact extension specified in your element.
If you are toggling a class, it (e.g. margin-left) must be the same as the class in the parent

const showMenu = () => {
    let parent = document.getElementById('sidebar');
    parent.classList.toggle('-ml-40')
  }

  return (
    <Layout>
      <aside
        id="sidebar"
        className="absolute h-screen -ml-40 pl-2 overflow-hidden float-left bg-black opacity-90 transition-spacing duration-500">
{children}
</aside>
</Layout>
)

[simonswiss]

Hey! 👋

Not really a big deal in this (OP) specific scenario, but I thought I'd jump in and provide some unsollicited (and friendly!) feedback 🤗

When doing transition animations, it's always a good idea to try and stick to CSS properties that are cheap to animate, like a transform property instead of a margin, if possible.

Here's an excellent article on the topic:

https://web.dev/animations-overview/

I've created a new Play from the demo, with a few adjustments explained below the link:

https://play.tailwindcss.com/x1GM5fsSzr

I left the original code in a comment, so you can compare

1. I have removed the transition transform duration-500 ease-in-out classes on the <a> element. Since those are for the arrow, these only need to be applied on the SVG element.

2. Kinda tangential, but I added an items-center class to the <a> element to vertically align the arrow with the text.

3. On the SVG, I replaced the group-hover utility from group-hover:ml-8 to group-hover:translate-x-8, so the transform property is animated instead of margin-left. This avoid triggering a re-paint (which leads to a lesser performance and a potentially janky transition). It also means that the default transition class works, no need to reach for transition-all.

4. In the config side of things, I removed all the variants that were extended, and added the group-hover variant for the translate core plugin only - since it's the one we're now using for the group-hover transition.

Hope it helps! I realise the OP is already 6 months old, but this might help someone else stumbling upon this discussion thread 👍

[altercode]

Wow, Thanks Simon for clarifying this! I didn't know that transitioning margin property is less performance!