@remotion/tailwind-v4: New package

packages/cli/package.json

@@ -57,7 +57,7 @@
 		"@types/prompts": "^2.4.1",
 		"@types/prettier": "^2.7.2",
 		"@remotion/zod-types": "workspace:*",
-		"@remotion/tailwind": "workspace:*",
+		"@remotion/tailwind-v4": "workspace:*",
 		"@remotion/enable-scss": "workspace:*",
 		"@remotion/skia": "workspace:*",
 		"react": "19.0.0",

packages/cli/src/list-of-remotion-packages.ts

@@ -32,6 +32,7 @@ export const listOfRemotionPackages = [
 	'@remotion/studio-shared',
 	'@remotion/zod-types',
 	'@remotion/tailwind',
+	'@remotion/tailwind-v4',
 	'@remotion/transitions',
 	'@remotion/install-whisper-cpp',
 	'@remotion/openai-whisper',

packages/create-video/src/add-tailwind.ts

@@ -1,37 +1,25 @@
 import fs from 'fs';
 import path from 'path';
 
-export const addTailwindStyleCss = (projectRoot: string) => {
-	const styleFile = path.join(projectRoot, 'src', 'tailwind.css');
-	fs.writeFileSync(
-		styleFile,
-		`@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`,
-	);
-};
-
-export const addTailwindConfigJs = (projectRoot: string) => {
-	const tailwindConfigFile = path.join(projectRoot, 'tailwind.config.js');
+export const addPostcssConfig = (projectRoot: string) => {
+	const postcssConfigMjs = path.join(projectRoot, 'postcss.config.mjs');
 
 	fs.writeFileSync(
-		tailwindConfigFile,
-		`/* eslint-env node */
-module.exports = {
-  content: ["./src/**/*.{ts,tsx,js,jsx}"],
-  theme: {
-    extend: {},
+		postcssConfigMjs,
+		`
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
   },
-  plugins: [],
 };
-`,
+`.trim() + '\n',
 	);
 };
 
 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;
 
@@ -41,8 +29,11 @@ export const addTailwindRootCss = (projectRoot: string) => {
 
 	const root = fs.readFileSync(rootFile, 'utf-8');
 
-	const newFile = `import "./tailwind.css";\n${root}`;
+	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) => {
@@ -72,7 +63,7 @@ export const addTailwindToConfig = (projectRoot: string) => {
 
 	const newLines = [
 		...headerLines,
-		`import { enableTailwind } from '@remotion/tailwind';`,
+		`import { enableTailwind } from '@remotion/tailwind-v4';`,
 		...tailLines,
 		'Config.overrideWebpackConfig(enableTailwind);',
 	];

packages/create-video/src/init.ts

@@ -2,9 +2,8 @@ import chalk from 'chalk';
 import execa from 'execa';
 import path from 'node:path';
 import {
-	addTailwindConfigJs,
+	addPostcssConfig,
 	addTailwindRootCss,
-	addTailwindStyleCss,
 	addTailwindToConfig,
 } from './add-tailwind';
 import {createYarnYmlFile} from './add-yarn2-support';
@@ -126,9 +125,8 @@ export const init = async () => {
 		});
 		patchReadmeMd(projectRoot, pkgManager, selectedTemplate);
 		if (shouldOverrideTailwind) {
-			addTailwindStyleCss(projectRoot);
 			addTailwindToConfig(projectRoot);
-			addTailwindConfigJs(projectRoot);
+			addPostcssConfig(projectRoot);
 			addTailwindRootCss(projectRoot);
 		}
 

packages/create-video/src/list-of-remotion-packages.ts

@@ -32,6 +32,7 @@ export const listOfRemotionPackages = [
 	'@remotion/studio-shared',
 	'@remotion/zod-types',
 	'@remotion/tailwind',
+	'@remotion/tailwind-v4',
 	'@remotion/transitions',
 	'@remotion/install-whisper-cpp',
 	'@remotion/openai-whisper',

packages/create-video/src/patch-package-json.ts

@@ -64,7 +64,7 @@ export const patchPackageJson = (
 	const newDependenciesWithTailwind = addTailwind
 		? {
 				...newDependencies,
-				'@remotion/tailwind': latestRemotionVersion,
+				'@remotion/tailwind-v4': latestRemotionVersion,
 			}
 		: newDependencies;
 

packages/create-video/src/test/patch-package-json.test.ts

@@ -50,7 +50,7 @@ for (const packageManager of packageManagers) {
 			dependencies: {
 				...packageJson.dependencies,
 				'@remotion/cli': latestRemotionVersion,
-				'@remotion/tailwind': latestRemotionVersion,
+				'@remotion/tailwind-v4': latestRemotionVersion,
 				remotion: latestRemotionVersion,
 			},
 			sideEffects: ['*.css'],

packages/docs/components/TableOfContents/api.tsx

@@ -10,6 +10,7 @@ import {TableOfContents as OpenAiWhisperTableOfContents} from '../../docs/openai
 import {PlayerTableOfContents} from '../../docs/player/TableOfContents';
 import {TableOfContents as SkiaTableOfContents} from '../../docs/skia/TableOfContents';
 import {TableOfContents as StudioTableOfContents} from '../../docs/studio/TableOfContents';
+import {TableOfContents as TailwindV4TableOfContents} from '../../docs/tailwind-v4/TableOfContents';
 import {TableOfContents as TailwindTableOfContents} from '../../docs/tailwind/TableOfContents';
 import {TableOfContents as ThreeTableOfContents} from '../../docs/three/TableOfContents';
 import {TableOfContents as WebcodecsTableOfContents} from '../../docs/webcodecs/TableOfContents';
@@ -83,8 +84,11 @@ export const TableOfContents: React.FC = () => {
 			<p>Obtain info about video and audio.</p>
 			<AnimationUtilsTableOfContents />
 			<h2>@remotion/tailwind</h2>
-			<p>Webpack override for using TailwindCSS</p>
+			<p>Webpack override for using TailwindCSS v3</p>
 			<TailwindTableOfContents />
+			<h2>@remotion/tailwind-v4</h2>
+			<p>Webpack override for using TailwindCSS v4</p>
+			<TailwindV4TableOfContents />
 			<h2>@remotion/enable-scss</h2>
 			<p>Webpack override for enabling SASS/SCSS</p>
 			<EnableScssTableOfContents />

packages/docs/docs/overwriting-webpack-config.mdx

@@ -112,7 +112,7 @@ If you have multiple overrides, you should curry them:
 ```tsx twoslash
 import {Config} from '@remotion/cli/config';
 import {enableScss} from '@remotion/enable-scss';
-import {enableTailwind} from '@remotion/tailwind';
+import {enableTailwind} from '@remotion/tailwind-v4';
 
 Config.overrideWebpackConfig((c) => enableScss(enableTailwind(c)));
 ```
@@ -122,7 +122,7 @@ From Remotion v4.0.229, you can also use `Config.overrideWebpackConfig` multiple
 ```tsx twoslash
 import {Config} from '@remotion/cli/config';
 import {enableScss} from '@remotion/enable-scss';
-import {enableTailwind} from '@remotion/tailwind';
+import {enableTailwind} from '@remotion/tailwind-v4';
 
 Config.overrideWebpackConfig(enableScss);
 Config.overrideWebpackConfig(enableTailwind);
@@ -147,9 +147,7 @@ export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
     module: {
       ...currentConfiguration.module,
       rules: [
-        ...(currentConfiguration.module?.rules
-          ? currentConfiguration.module.rules
-          : []),
+        ...(currentConfiguration.module?.rules ? currentConfiguration.module.rules : []),
         {
           test: /\.mdx?$/,
           use: [
@@ -231,9 +229,7 @@ export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
           return {
             ...r,
             // Remove Remotion loading SVGs as a URL
-            test: new RegExp(
-              r.test.toString().replace(/svg\|/g, '').slice(1, -1),
-            ),
+            test: new RegExp(r.test.toString().replace(/svg\|/g, '').slice(1, -1)),
           };
         }),
       ],
@@ -277,9 +273,7 @@ export const enableGlsl: WebpackOverrideFn = (currentConfiguration) => {
     module: {
       ...currentConfiguration.module,
       rules: [
-        ...(currentConfiguration.module?.rules
-          ? currentConfiguration.module.rules
-          : []),
+        ...(currentConfiguration.module?.rules ? currentConfiguration.module.rules : []),
         {
           test: /\.(glsl|vs|fs|vert|frag)$/,
           exclude: /node_modules/,

packages/docs/docs/tailwind-v4/TableOfContents.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
+
+export const TableOfContents: React.FC = () => {
+	return (
+		<div>
+			<Grid>
+				<TOCItem link="/docs/tailwind-v4/enable-tailwind">
+					<strong>{'enableTailwind()'}</strong>
+					<div>Override the Webpack config to enable TailwindCSS</div>
+				</TOCItem>
+			</Grid>
+		</div>
+	);
+};

packages/docs/docs/tailwind-v4/enable-tailwind.mdx

@@ -0,0 +1,36 @@
+---
+image: /generated/articles-docs-tailwind-v4-enable-tailwind.png
+title: enableTailwind()
+crumb: '@remotion/tailwind-v4'
+---
+
+_available from v4.0.256_
+
+A function that modifies the default Webpack configuration to make the necessary changes to support TailwindCSS.
+See the [setup](/docs/tailwind) to see full instructions on how to setup TailwindCSS in Remotion.
+
+```ts twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+import {enableTailwind} from '@remotion/tailwind-v4';
+
+Config.overrideWebpackConfig((currentConfiguration) => {
+  return enableTailwind(currentConfiguration);
+});
+```
+
+## Multiple Webpack changes
+
+If you want to make other configuration changes, you can do so by doing them reducer-style:
+
+```ts twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+import {enableTailwind} from '@remotion/tailwind-v4';
+
+Config.overrideWebpackConfig((currentConfiguration) => {
+  return enableTailwind({
+    ...currentConfiguration,
+
+    // Make other changes
+  });
+});
+```

packages/docs/docs/tailwind-v4/overview.mdx

@@ -0,0 +1,38 @@
+---
+image: /generated/articles-docs-tailwind-v4-overview.png
+id: overview
+sidebar_label: Overview
+title: '@remotion/tailwind-v4'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import {ExperimentalBadge} from '../../components/Experimental';
+import {TableOfContents} from './TableOfContents';
+
+This package provides utilities useful for integrating [TailwindCSS v4](https://tailwindcss.com/) with Remotion, as documented on our [TailwindCSS](/docs/tailwind) page.
+
+## Installation
+
+Install `@remotion/tailwind-v4` as well as TailwindCSS dependencies.
+
+<Installation pkg="@remotion/tailwind-v4" />
+
+<br />
+
+[Override the Webpack config](/docs/webpack) by using [`enableTailwind()`](/docs/tailwind/enable-tailwind).
+
+```ts twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+import {enableTailwind} from '@remotion/tailwind-v4';
+
+Config.overrideWebpackConfig((currentConfiguration) => {
+  return enableTailwind(currentConfiguration);
+});
+```
+
+Then follow the remaining set up steps from the [TailwindCSS](/docs/tailwind) page.
+
+## APIs
+
+<TableOfContents />

packages/docs/docs/tailwind.mdx

@@ -55,7 +55,92 @@ yarn create video
 
 The following templates support scaffolding with TailwindCSS: <TailwindSupport />
 
-## Install in existing project
+## Installing Tailwind v4 in existing project
+
+_from v4.0.256_
+
+1. Install [`@remotion/tailwind-v4`](/docs/tailwind-v4/overview) package and TailwindCSS dependencies.
+
+<Tabs
+defaultValue="npm"
+values={[
+{ label: 'npm', value: 'npm', },
+{ label: 'yarn', value: 'yarn', },
+{ label: 'pnpm', value: 'pnpm', },
+]
+}>
+<TabItem value="npm">
+
+```bash
+npm i -D @remotion/tailwind-v4
+```
+
+  </TabItem>
+
+  <TabItem value="yarn">
+
+```bash
+yarn add -D @remotion/tailwind-v4
+```
+
+  </TabItem>
+  <TabItem value="pnpm">
+
+```bash
+pnpm i -D @remotion/tailwind-v4
+```
+
+  </TabItem>
+</Tabs>
+
+2. Add the Webpack override from `@remotion/tailwind-v4` to your config file:
+
+```ts twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+import {enableTailwind} from '@remotion/tailwind-v4';
+
+Config.overrideWebpackConfig((currentConfiguration) => {
+  return enableTailwind(currentConfiguration);
+});
+```
+
+3. If you use the [`bundle()` or `deploySite()` Node.JS API, add the Webpack override to it as well](/docs/webpack#when-using-bundle-and-deploysite).
+
+4. Create a file `postcss.config.mjs` with the following content:
+
+```css title="postcss.config.mjs"
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
+5. Create a file `src/index.css` with the following content:
+
+```css title="src/index.css"
+@import 'tailwindcss';
+```
+
+5. Import the stylesheet in your `src/Root.tsx` file. Add to the top of the file:
+
+```js title="src/Root.tsx"
+import './index.css';
+```
+
+7. Ensure your `package.json` does not have `"sideEffects": false` set. If it has, declare that CSS files have a side effect:
+
+```diff title="package.json"
+{
+// Only if `"sideEffects": false` exists in your package.json.
+-  "sideEffects": false
++  "sideEffects": ["*.css"]
+}
+```
+
+8. Start using TailwindCSS! You can verify that it's working by adding `className="bg-red-900"` to any element.
+
+## Installing Tailwind v3 in existing project
 
 _from v3.3.95, see [instructions for older versions](https://github.com/remotion-dev/remotion/blob/88a5d8d17f50d6ab2b8a408556118d15a3686343/packages/docs/docs/tailwind.md)_