Timeline – Setup - Remotion

Installation

Copy the timeline/ folder to your application
Install the required dependencies:

bash

npm install remotion @remotion/player @remotion/media-utils tailwindcss

Tailwind Configuration

Using Tailwind CSS v4 (Current Project)

This project uses Tailwind CSS V4. Import src/timeline/theme/timeline.css in your global CSS file:

css

@import './timeline/theme/timeline.css';

You can customize the colors by modifying the values in the @theme block.

Using Tailwind CSS v3 (Legacy)

<details> <summary> Instructions for Tailwind v3 </summary> Use `src/timeline/theme/timeline-preset.mjs` as a preset in your `tailwind.config.js`:

Then, set up your tailwind.config.js like this:

import timelinePreset from './timeline/theme/timeline-preset.mjs';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [timelinePreset],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // Add your custom theme extensions here
    },
  },
};

</details>