Skip to main content

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