All threads / ViewComponents and Tailwind CSS JIT

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

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

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.