title: TailwindCSS animations on conditionally rendered components in React
body: <p>If I am conditionally rendering a component depending on some state, how can I animate its transition between its open and closed states in React with TailwindCSS?</p>
  <pre><code>{successMessage &amp;&amp; (
                &lt;div className=&quot;flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded&quot;&gt;
                  &lt;p&gt;Added to watchlist!&lt;/p&gt;
                  &lt;button onClick={() =&gt; setSuccessMessage(false)}&gt;X&lt;/button&gt;
                &lt;/div&gt;
              )}
  </code></pre>
  <p>This code half works but there is no animation or transition period to it. How can I fix this?</p>