Timeline – Setup
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)
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},},};