Menu
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
Core API for Helios video engine. Use when creating compositions, managing timeline state, controlling playback, or subscribing to frame updates. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.
Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.
Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.
Patterns for using Helios with Framer Motion. Use when you want to use Framer Motion's physics and transitions but need frame-perfect synchronization with Helios.
| name | example-tailwind-animation |
| description | Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes. |
Use Tailwind CSS to style and animate Helios compositions. Combine standard Tailwind utility classes with Helios's autoSyncAnimations feature.
Configure Helios:
const helios = new Helios({
// ...
autoSyncAnimations: true, // Enable CSS synchronization
animationScope: document.getElementById('app')
});
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>
Custom Keyframes (tailwind.config.js):
module.exports = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
}
}
}
}
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.
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.
examples/tailwind-animation/