Check out this innovative method that utilizes solely tailwind classes for animation. You can view a stackblitz demo here

Additionally, a concise explanation is provided below.

Initially, the hidden state of the mobile menu div is maintained by applying specific tailwind classes. The following classes are used:

scale-95, opacity-0, and pointer-events-none - ensuring no interactions occur in this hidden state.

When the menu becomes active, these classes are added:

scale-100, opacity-100, and pointer-events-auto.

To animate these properties, the transition class is applied to the div along with the duration-200 class for defining the transition duration.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<header>
    <div class="-mr-2 -my-2 md:hidden">
        <button type="button" (click)="toggleMobileMenu()"
          class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        </div>
<!-- Specific classes added: transition transform scale-95 opacity-0 duration-200 pointer-events-none -->
        <div class="absolute z-30 top-0 inset-x-0 p-2 transition transform scale-95 opacity-0 duration-200 pointer-events-none md:hidden"
            [ngClass]="{'scale-100 pointer-events-auto opacity-100': mobileMenuOpen}">
<!-- Toggle classes: scale-100 opacity-100 and pointer-events-auto -->
            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
                <div class="flex items-center justify-between">
                    <button (click)="toggleMobileMenu()" type="button"
              class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
                </div>
                <div class="py-6 px-5">
                    <div class="grid gap-4">
                        <a routerLink="/" (click)="toggleMobileMenu()" class="text-base font-medium text-gray-900 hover:text-gray-700">
                            Home
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header> 

By utilizing the appropriate tailwind classes, you can effortlessly achieve the desired animation effect.

Thanks to this thread, I finally found the solution I needed with Angular 14 & TailwindUI. Here's what worked for me:

I had to implement a notification to show the response from an http request. I created a NotificationService that handles the display using subscriptions. I discovered that this SO thread(s) was extremely helpful in achieving this.

// app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [],
    animations: [
        trigger('renderNotification', [
            transition(':enter', [
                style({
                    transform: 'translateY(0.5rem)',
                    opacity: 0,
                }),
                animate(
                    '150ms 0ms ease-out',
                    style({
                        transform: 'translateY(0)',
                        opacity: 1,
                    })
                ),
            ]),
            transition(':leave', [
                style({
                    transform: 'translateY(0)',
                    opacity: 1,
                }),
                animate(
                    '100ms 0ms ease-in',
                    style({
                        transform: 'translateX(0.5rem)',
                        opacity: 0,
                    })
                ),
            ]),
        ]),
    ],
})
export class AppComponent implements OnInit {
    showNotification: boolean = false;
    ...
}

<!-- app.component.html -->

<div class="flex h-full">
    <div
        aria-live="assertive"
        class="pointer-events-none fixed inset-0 z-50 flex items-end px-4 py-6 sm:items-start sm:p-6"
    >
        <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
            <app-notifications
                class=""
                [@renderNotification]="notification.show"
                *ngIf="showNotification"
                [type]="notification.type"
                [title]="notification.title"
                [body]="notification.body"
                (closeNotificationEvent)="closeNotification()"
            ></app-notifications>
        </div>
    </div>

    ...

    <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
        <router-outlet></router-outlet>
    </div>
</div>

Hopefully, this can be of help to someone else out there!