create-video 4.0.255 → 4.0.256

package/dist/add-tailwind.d.ts

@@ -1,4 +1,3 @@
-export declare const addTailwindStyleCss: (projectRoot: string) => void;
-export declare const addTailwindConfigJs: (projectRoot: string) => void;
+export declare const addPostcssConfig: (projectRoot: string) => void;
 export declare const addTailwindRootCss: (projectRoot: string) => void;
 export declare const addTailwindToConfig: (projectRoot: string) => void;

package/dist/add-tailwind.js

@@ -3,40 +3,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addTailwindToConfig = exports.addTailwindRootCss = exports.addTailwindConfigJs = exports.addTailwindStyleCss = void 0;
+exports.addTailwindToConfig = exports.addTailwindRootCss = exports.addPostcssConfig = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-const addTailwindStyleCss = (projectRoot) => {
-    const styleFile = path_1.default.join(projectRoot, 'src', 'tailwind.css');
-    fs_1.default.writeFileSync(styleFile, `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`);
-};
-exports.addTailwindStyleCss = addTailwindStyleCss;
-const addTailwindConfigJs = (projectRoot) => {
-    const tailwindConfigFile = path_1.default.join(projectRoot, 'tailwind.config.js');
-    fs_1.default.writeFileSync(tailwindConfigFile, `/* eslint-env node */
-module.exports = {
-  content: ["./src/**/*.{ts,tsx,js,jsx}"],
-  theme: {
-    extend: {},
+const addPostcssConfig = (projectRoot) => {
+    const postcssConfigMjs = path_1.default.join(projectRoot, 'postcss.config.mjs');
+    fs_1.default.writeFileSync(postcssConfigMjs, `
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
   },
-  plugins: [],
 };
-`);
+`.trim() + '\n');
 };
-exports.addTailwindConfigJs = addTailwindConfigJs;
+exports.addPostcssConfig = addPostcssConfig;
 const addTailwindRootCss = (projectRoot) => {
     const rootFileTsx = path_1.default.join(projectRoot, 'src', 'Root.tsx');
     const rootFileJsx = path_1.default.join(projectRoot, 'src', 'Root.jsx');
+    const indexCss = path_1.default.join(projectRoot, 'src', 'index.css');
     const rootFile = fs_1.default.existsSync(rootFileTsx) ? rootFileTsx : rootFileJsx;
     if (!fs_1.default.existsSync(rootFile)) {
         throw new Error('No Root file found');
     }
     const root = fs_1.default.readFileSync(rootFile, 'utf-8');
-    const newFile = `import "./tailwind.css";\n${root}`;
+    const newFile = `import "./index.css";\n${root}`;
     fs_1.default.writeFileSync(rootFile, newFile);
+    const css = `@import "tailwindcss";\n`;
+    fs_1.default.writeFileSync(indexCss, css);
 };
 exports.addTailwindRootCss = addTailwindRootCss;
 const addTailwindToConfig = (projectRoot) => {
@@ -60,7 +53,7 @@ const addTailwindToConfig = (projectRoot) => {
     const tailLines = lines.slice(lastImportLine + 1);
     const newLines = [
         ...headerLines,
-        `import { enableTailwind } from '@remotion/tailwind';`,
+        `import { enableTailwind } from '@remotion/tailwind-v4';`,
         ...tailLines,
         'Config.overrideWebpackConfig(enableTailwind);',
     ];

package/dist/esm/index.mjs

@@ -32,6 +32,7 @@ var listOfRemotionPackages = [
   "@remotion/studio-shared",
   "@remotion/zod-types",
   "@remotion/tailwind",
+  "@remotion/tailwind-v4",
   "@remotion/transitions",
   "@remotion/install-whisper-cpp",
   "@remotion/openai-whisper",
@@ -314,12 +315,12 @@ var FEATURED_TEMPLATES = [
     repoName: "template-overlay",
     description: "Overlays for video editing software",
     longerDescription: `
-\t\t\t<span>
-\t\t\t\tA starter template to create overlays to use in conventional video
-\t\t\t\tediting software.{' '}
-\t\t\t\t<a href="/docs/overlay">Read more about creating overlays.</a>
-\t\t\t</span>
-\t\t\t`,
+			<span>
+				A starter template to create overlays to use in conventional video
+				editing software.{' '}
+				<a href="/docs/overlay">Read more about creating overlays.</a>
+			</span>
+			`,
     promoVideo: {
       muxId: "zgy7XK01009y33Vfzhns02cZS00rOyeZ6WaanaxcrDysqmU",
       height: 720,
@@ -339,11 +340,11 @@ var FEATURED_TEMPLATES = [
     org: "remotion-dev",
     repoName: "template-code-hike",
     description: "Beautiful code animations",
-    longerDescription: `\t\t\t
-\t\t\t\tAdd code snippets and animate between them using
-\t\t\t\t<a href="https://codehike.org/">Code Hike</a>. Supports many languages,
-\t\t\t\tTypeScript error annotations, and many themes.
-\t\t\t`,
+    longerDescription: `			
+				Add code snippets and animate between them using
+				<a href="https://codehike.org/">Code Hike</a>. Supports many languages,
+				TypeScript error annotations, and many themes.
+			`,
     promoVideo: {
       muxId: "fKwnpTAOqvnZpu00fwEezi00cpF3927NumGcS1gGdUj8A",
       width: 1080,

package/dist/init.js

@@ -100,9 +100,8 @@ const init = async () => {
         });
         (0, patch_readme_1.patchReadmeMd)(projectRoot, pkgManager, selectedTemplate);
         if (shouldOverrideTailwind) {
-            (0, add_tailwind_1.addTailwindStyleCss)(projectRoot);
             (0, add_tailwind_1.addTailwindToConfig)(projectRoot);
-            (0, add_tailwind_1.addTailwindConfigJs)(projectRoot);
+            (0, add_tailwind_1.addPostcssConfig)(projectRoot);
             (0, add_tailwind_1.addTailwindRootCss)(projectRoot);
         }
         (0, create_public_folder_1.createPublicFolder)(projectRoot);

package/dist/list-of-remotion-packages.js

@@ -35,6 +35,7 @@ exports.listOfRemotionPackages = [
     '@remotion/studio-shared',
     '@remotion/zod-types',
     '@remotion/tailwind',
+    '@remotion/tailwind-v4',
     '@remotion/transitions',
     '@remotion/install-whisper-cpp',
     '@remotion/openai-whisper',

package/dist/patch-package-json.js

@@ -41,7 +41,7 @@ const patchPackageJson = ({ projectRoot, projectName, latestRemotionVersion, pac
     const newDependenciesWithTailwind = addTailwind
         ? {
             ...newDependencies,
-            '@remotion/tailwind': latestRemotionVersion,
+            '@remotion/tailwind-v4': latestRemotionVersion,
         }
         : newDependencies;
     const newPackageJson = JSON.stringify({

package/dist/test/patch-package-json.test.js

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

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/create-video"
   },
   "name": "create-video",
-  "version": "4.0.255",
+  "version": "4.0.256",
   "description": "Create a new Remotion project",
   "main": "dist/index.js",
   "bin": {
@@ -27,7 +27,7 @@
     "@types/tar": "6.1.1",
     "react": "19.0.0",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.255"
+    "@remotion/eslint-config-internal": "4.0.256"
   },
   "exports": {
     "./package.json": "./package.json",