What causes "No Root file found" in remotion-dev/remotion?

Ensure a `src/Root.tsx` (or `.jsx`) file exists before running the Tailwind setup; create it if needed and register your compositions there.

remotion-dev/remotion · error · Error

No Root file found

Error message

No Root file found

What it means

Thrown by `addTailwindRootCss` (a create-video Tailwind setup step) when neither `src/Root.tsx` nor `src/Root.jsx` exists in the project root. The function needs to inject an `import './index.css'` line at the top of the Root file to wire up Tailwind. Without a Root file there is no entry point to modify.

Source

Thrown at packages/create-video/src/add-tailwind.ts:12

import fs from 'fs';
import path from 'path';

export const addTailwindRootCss = (projectRoot: string) => {
	const rootFileTsx = path.join(projectRoot, 'src', 'Root.tsx');
	const rootFileJsx = path.join(projectRoot, 'src', 'Root.jsx');
	const indexCss = path.join(projectRoot, 'src', 'index.css');

	const rootFile = fs.existsSync(rootFileTsx) ? rootFileTsx : rootFileJsx;

	if (!fs.existsSync(rootFile)) {
		throw new Error('No Root file found');
	}

	const root = fs.readFileSync(rootFile, 'utf-8');

	const newFile = `import "./index.css";\n${root}`;
	fs.writeFileSync(rootFile, newFile);

	const css = `@import "tailwindcss";\n`;
	fs.writeFileSync(indexCss, css);
};

export const addTailwindToConfig = (projectRoot: string) => {
	const configFileTs = path.join(projectRoot, 'remotion.config.ts');
	const configFileJs = path.join(projectRoot, 'remotion.config.js');

	const configFile = fs.existsSync(configFileTs) ? configFileTs : configFileJs;

	if (!fs.existsSync(configFile)) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Ensure a `src/Root.tsx` (or `.jsx`) file exists before running the Tailwind setup; create it if needed and register your compositions there.
Use a template that ships with the conventional Root file.
If your entry is differently named, temporarily create `src/Root.tsx` that re-exports from your real entry, then run the setup.

Example fix

// before: project has src/index.tsx but no src/Root.tsx
// create src/Root.tsx:
// after
import {registerRoot} from 'remotion';
import {RemotionRoot} from './Composition';
registerRoot(RemotionRoot);

Defensive patterns

Strategy: validation

Validate before calling

import fs from 'fs';
import path from 'path';

const rootExists = (projectRoot: string): boolean =>
  fs.existsSync(path.join(projectRoot, 'src', 'Root.tsx')) ||
  fs.existsSync(path.join(projectRoot, 'src', 'Root.jsx'));

Type guard

const hasRootFile = (projectRoot: string): boolean =>
  fs.existsSync(path.join(projectRoot, 'src', 'Root.tsx')) ||
  fs.existsSync(path.join(projectRoot, 'src', 'Root.jsx'));

Prevention

Ensure your template ships src/Root.tsx before enabling Tailwind setup.
Follow the Remotion Root file convention (registerRoot in src/Root.tsx).
Run the Tailwind setup only against a fully generated project.

When it happens

Trigger: Running `create-video` with the Tailwind option on a template or existing project whose entry file is not named Root.tsx/Root.jsx or lives in a different directory. The step checks `src/Root.tsx` then `src/Root.jsx` and throws if both are absent.

Common situations: Using a custom template where the entry is `src/index.tsx` or `src/Composition.tsx`; running the Tailwind setup against a project that does not follow Remotion's default Root convention; a partially generated project missing the Root file.

Related errors

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/81828f95b30965c1. Report an issue: GitHub.