ViewComponents and Tailwind CSS JIT

I created a flash view component to display flash messages.

It does work, but the javascript trigger its display does not work as expected. Instead of displaying on the spot, it waits for like 5 seconds before rendering and disappear rapidly...

The project uses Hotwire, Stimulus, Webpacker (6), Tailwind CSS 2.2 with JIT

No error reported during the asset compilation but I suspect that the assets are not compiled in the right sequence or something like that.

Here the Stimulus controller code"

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    if (!this.isPreview) {
      // Display with transition
      setTimeout(() => {
        this.element.classList.remove('hidden');
        this.element.classList.add('transform', 'ease-out', 'duration-300', 'transition', 'translation-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');

        // Trigger transition
        setTimeout(() => {
          this.element.classList.add('translate-y-0', 'opacity-100', 'sm:translate-x-0');
        }, 100);
      }, 500);

      // Auto-hide after 5 seconds
      setTimeout(() => {
        this.close();
      }, 5000);
    }
  }

  close() {
    // Remove with transition
    this.element.classList.remove('transform', 'ease-out', 'duration-300', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2', 'translate-y-0', 'sm:translate-x-0');
    this.element.classList.add('ease-in', 'duration-100');

    // Trigger transition
    setTimeout(() => {
      this.element.classList.add('opacity-y-0');
    }, 100);

    // Remove element after transition
    setTimeout(() => {
      this.element.remove();
    }, 300);
  }

  disconnect() {
    this.element.classList.remove('play-animation')
  }

  get isPreview() {
    return document.documentElement.hasAttribute('data-turbolinks-preview')
  }
}

found out the change in Tailwind that prevented the expected behavior.