Remotion Rule: Tailwind

What it is

This is an official Remotion agent skill rule that provides guidance for using TailwindCSS within Remotion video projects. Remotion is a framework for creating programmatic videos in React, and this rule ensures AI coding agents apply Tailwind classes correctly in the video context.

The rule is designed for developers who use both Remotion and TailwindCSS together. It activates automatically when an AI agent detects a Remotion project that has TailwindCSS installed, providing constraints and best practices specific to the video rendering environment.

How it saves time or tokens

Without this rule, AI agents may generate Tailwind classes that break in Remotion's rendering pipeline. The most common mistake is using Tailwind transition and animation classes (transition-, animate-), which conflict with Remotion's frame-based animation model. This rule prevents those errors upfront, eliminating debugging time. The rule file itself is approximately 500 tokens, keeping the context window cost low while providing high-value constraints.

How to use

1. Install the Remotion skills collection:

npx skills add remotion-dev/skills

1. The Tailwind rule activates automatically when your AI agent detects a Remotion project with TailwindCSS installed.

1. If TailwindCSS is not yet installed in your Remotion project, the rule instructs the agent to follow the official setup guide at remotion.dev/docs/tailwind.

Example

Correct way to animate with Tailwind classes in Remotion:

import { useCurrentFrame, interpolate } from 'remotion';

export const AnimatedTitle: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  const translateY = interpolate(frame, [0, 30], [20, 0]);

  return (
    <div
      className="text-4xl font-bold text-white bg-blue-600 p-8 rounded-xl"
      style={{
        opacity,
        transform: `translateY(${translateY}px)`,
      }}
    >
      Hello Remotion
    </div>
  );
};
// Use Tailwind for styling (text-4xl, bg-blue-600, etc.)
// Use useCurrentFrame() for animation (NOT transition-* classes)

Related on TokRepo

• Featured workflows — Discover more AI skills and developer tools curated on TokRepo.
• Coding tools — Browse coding tools and frameworks for AI-assisted development.

Common pitfalls

• Using Tailwind transition- or animate- classes in Remotion components causes rendering issues. Always animate using the useCurrentFrame() hook instead.
• Forgetting to install and enable TailwindCSS in the Remotion project before using Tailwind classes results in unstyled components. Follow the official setup docs first.
• Applying Tailwind responsive breakpoints (sm:, md:, lg:) has no effect in Remotion since videos render at a fixed resolution. Use the composition width and height for layout decisions.