title: Tailwind transition width
body: <p>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!</p>
  <pre><code>&lt;button class=&quot;bg-green-600 text-green-100 ring-green-400 p-4 rounded-full focus:outline-none&quot;&gt;
    &lt;span *ngIf=&quot;buttonText&quot; class=&quot;font-semibold&quot;&gt;{{buttonText}}&lt;/span&gt;
    &lt;svg *ngIf=&quot;!buttonText&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;h-6 w-6&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;
      &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M12 6v6m0 0v6m0-6h6m-6 0H6&quot; /&gt;
    &lt;/svg&gt;
  &lt;/button&gt;
  </code></pre>