Tailwind transition width

user_682308 0
Viewed 1342

I'm having trouble understanding how I can use TailwindCSS transition utilities to perform a simple width transition in this Angular component. For example, the button below usually displays an SVG icon. However, occasionally, it displays a text message. When the text message is displayed instead of the SVG icon, the width of the button changes. I would like to add a transition to the width change (in both directions) but I cannot figure out how. Any help appreciated!

<button class="bg-green-600 text-green-100 ring-green-400 p-4 rounded-full focus:outline-none">
  <span *ngIf="buttonText" class="font-semibold">{{buttonText}}</span>
  <svg *ngIf="!buttonText" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
  </svg>
</button>
tailwind-css css
1 Answers

I think you need the transition-duration css property which corresponds to a transition-{number} tailwind class https://tailwindcss.com/docs/transition-duration. You can also use a transition timing function https://tailwindcss.com/docs/transition-timing-function

EDIT

The problem isn't with tailwind, but rather with css itself take a look at this css-trick https://css-tricks.com/using-css-transitions-auto-dimensions/ Sorry I didn't notice this earlier.

One way to fix this issue is to set the width css property to it's actual computed width.

user_108927220
Related