Timeline – Setup

Installation

1. Copy the timeline/ folder to your application
2. 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)

Instructions for Tailwind v3

Use src/timeline/theme/timeline-preset.mjs as a preset in your tailwind.config.js:

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

js
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
    },
  },
};