title: How to use tailwindcss transitions in nuxt?
body: <p>So I was trying to use tailwindcss transistions into my nuxt application, I wanted to basically animate the modal using the classnames provided by vue transitions</p>
  <p>Here's my code for the Modal.vue file</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;!-- This example requires Tailwind CSS v2.0+ --&gt;
    &lt;transition
      name=&quot;modal&quot;
      enter-class=&quot;ease-out duration-300 opacity-0&quot;
      enter-to-class=&quot;opacity-100&quot;
      leave-class=&quot;opacity-100&quot;
      leave-to-class=&quot;ease-out duration-200 opacity-0&quot;
    &gt;
      &lt;div class=&quot;fixed z-10 inset-0 overflow-y-auto&quot;&gt;
        &lt;div
          class=&quot;flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0&quot;
        &gt;
          &lt;!--
        Background overlay, show/hide based on modal state.
  
        Entering: &quot;ease-out duration-300&quot;
          From: &quot;opacity-0&quot;
          To: &quot;opacity-100&quot;
        Leaving: &quot;ease-in duration-200&quot;
          From: &quot;opacity-100&quot;
          To: &quot;opacity-0&quot;
      --&gt;
          &lt;div
            class=&quot;fixed inset-0 transition-opacity&quot;
            aria-hidden=&quot;true&quot;
            @click=&quot;handleCloseModal&quot;
          &gt;
            &lt;div class=&quot;absolute inset-0 bg-gray-500 opacity-75&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- This element is to trick the browser into centering the modal contents. --&gt;
          &lt;span
            class=&quot;hidden sm:inline-block sm:align-middle sm:h-screen&quot;
            aria-hidden=&quot;true&quot;
            &gt;&amp;#8203;&lt;/span
          &gt;
          &lt;!--
        Modal panel, show/hide based on modal state.
  
        Entering: &quot;ease-out duration-300&quot;
          From: &quot;opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95&quot;
          To: &quot;opacity-100 translate-y-0 sm:scale-100&quot;
        Leaving: &quot;ease-in duration-200&quot;
          From: &quot;opacity-100 translate-y-0 sm:scale-100&quot;
          To: &quot;opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95&quot;
      --&gt;
          &lt;div
            class=&quot;inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full&quot;
            role=&quot;dialog&quot;
            aria-modal=&quot;true&quot;
            aria-labelledby=&quot;modal-headline&quot;
          &gt;
            &lt;div class=&quot;bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4&quot;&gt;
              &lt;div class=&quot;sm:flex sm:items-start&quot;&gt;
                &lt;div
                  class=&quot;mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10&quot;
                &gt;
                  &lt;!-- Heroicon name: outline/exclamation --&gt;
                  &lt;svg
                    class=&quot;h-6 w-6 text-red-600&quot;
                    xmlns=&quot;http://www.w3.org/2000/svg&quot;
                    fill=&quot;none&quot;
                    viewBox=&quot;0 0 24 24&quot;
                    stroke=&quot;currentColor&quot;
                    aria-hidden=&quot;true&quot;
                  &gt;
                    &lt;path
                      stroke-linecap=&quot;round&quot;
                      stroke-linejoin=&quot;round&quot;
                      stroke-width=&quot;2&quot;
                      d=&quot;M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z&quot;
                    /&gt;
                  &lt;/svg&gt;
                &lt;/div&gt;
                &lt;div class=&quot;mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left&quot;&gt;
                  &lt;h3
                    class=&quot;text-lg leading-6 font-medium text-gray-900&quot;
                    id=&quot;modal-headline&quot;
                  &gt;
                    Deactivate account
                  &lt;/h3&gt;
                  &lt;div class=&quot;mt-2&quot;&gt;
                    &lt;p class=&quot;text-sm text-gray-500&quot;&gt;
                      Are you sure you want to deactivate your account? All of
                      your data will be permanently removed. This action cannot be
                      undone.
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse&quot;&gt;
              &lt;button
                type=&quot;button&quot;
                class=&quot;w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm&quot;
                @click=&quot;handleCloseModal&quot;
              &gt;
                Deactivate
              &lt;/button&gt;
              &lt;button
                type=&quot;button&quot;
                class=&quot;mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm&quot;
              &gt;
                Cancel
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/transition&gt;
  &lt;/template&gt;
  
  &lt;script&gt; 
  export default {
    methods: {
      handleCloseModal() {
        this.$emit(&quot;close-modal&quot;);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>I tried to work with regular transitions by adding it to the name and it worked but this seems to have and Issue</p>
  <p>Thanks to the kind soul in advance</p>