Save 36% for Black Friday! Learn more

Ask A Question

Notifications

You’re not receiving notifications from this thread.

ViewComponents and Tailwind CSS JIT

Stéphane Paquet asked in CSS

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')
  }
}
Reply

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

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 87,110+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.