Example Tailwind Animation

Tailwind CSS Animation

Use Tailwind CSS to style and animate Helios compositions. Combine standard Tailwind utility classes with Helios's autoSyncAnimations feature.

Quick Start

1. Configure Helios:

   const helios = new Helios({
     // ...
     autoSyncAnimations: true, // Enable CSS synchronization
     animationScope: document.getElementById('app')
   });
   

2. Use Tailwind Classes:

   <div class="w-full h-full bg-slate-900 flex items-center justify-center">
     <div class="animate-bounce text-6xl text-white font-bold">
       Hello Helios
     </div>
   </div>
   

3. Custom Keyframes (tailwind.config.js):

   module.exports = {
     theme: {
       extend: {
         animation: {
           'spin-slow': 'spin 3s linear infinite',
         }
       }
     }
   }
   

Key Patterns

Scoped Styles

When working in a monorepo or example folder, ensure your tailwind.config.js content array correctly targets your files to avoid global style leakage or missing styles.

Auto-Sync

With autoSyncAnimations: true, standard CSS animations (like animate-bounce, animate-spin) are automatically hijacked by Helios. helios.seek() will scrub the CSS animation to the correct point in time.

Source

• Example: examples/tailwind-animation/