diff --git a/apps/web/package.json b/apps/web/package.json index 9531b6c7..d9947643 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -70,6 +70,7 @@ "zustand": "^5.0.2" }, "devDependencies": { + "@tailwindcss/postcss": "^4.1.11", "@tailwindcss/typography": "^0.5.16", "@types/bun": "latest", "@types/pg": "^8.15.4", @@ -78,7 +79,7 @@ "cross-env": "^7.0.3", "drizzle-kit": "^0.31.4", "postcss": "^8", - "tailwindcss": "^3.4.1", + "tailwindcss": "^4.1.11", "tsx": "^4.7.1", "typescript": "^5.8.3" } diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs index 1a69fd2a..79bcf135 100644 --- a/apps/web/postcss.config.mjs +++ b/apps/web/postcss.config.mjs @@ -1,7 +1,7 @@ /** @type {import('postcss-load-config').Config} */ const config = { plugins: { - tailwindcss: {}, + "@tailwindcss/postcss": {}, }, }; diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx index 0de1e0a8..d759050b 100644 --- a/apps/web/src/app/blog/[slug]/page.tsx +++ b/apps/web/src/app/blog/[slug]/page.tsx @@ -87,8 +87,8 @@ async function Page({ params }: PageProps) {
-
-
+
+
diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx index ca553a67..08da9fd7 100644 --- a/apps/web/src/app/blog/page.tsx +++ b/apps/web/src/app/blog/page.tsx @@ -28,8 +28,8 @@ export default async function BlogPage() {
-
-
+
+
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx index 29151bd8..3ad99023 100644 --- a/apps/web/src/app/contributors/page.tsx +++ b/apps/web/src/app/contributors/page.tsx @@ -77,8 +77,8 @@ export default async function ContributorsPage() {
-
-
+
+
@@ -138,8 +138,8 @@ export default async function ContributorsPage() { className="group block flex-1" >
-
- +
+
@@ -268,7 +268,7 @@ export default async function ContributorsPage() { animationDelay: `${index * 100}ms`, }} > - +
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 2f7158cc..9cc7ed6b 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -1,6 +1,24 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@config '../../tailwind.config.ts'; + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} @layer base { :root { diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx index b7d700b5..4bb1e023 100644 --- a/apps/web/src/app/privacy/page.tsx +++ b/apps/web/src/app/privacy/page.tsx @@ -24,8 +24,8 @@ export default function PrivacyPage() {
-
-
+
+
@@ -47,7 +47,7 @@ export default function PrivacyPage() { have any questions.

- +

diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index 4b68791b..37c1ced2 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -142,7 +142,7 @@ export default function ProjectsPage() { href="/" className="flex items-center gap-1 hover:text-muted-foreground transition-colors" > - + Back
@@ -153,7 +153,7 @@ export default function ProjectsPage() { size="sm" onClick={handleCancelSelection} > - + Cancel {selectedProjects.size > 0 && ( @@ -162,7 +162,7 @@ export default function ProjectsPage() { size="sm" onClick={() => setIsBulkDeleteDialogOpen(true)} > - + Delete ({selectedProjects.size}) )} @@ -192,7 +192,7 @@ export default function ProjectsPage() { {isSelectionMode ? (
{selectedProjects.size > 0 && ( @@ -200,7 +200,7 @@ export default function ProjectsPage() { variant="destructive" onClick={() => setIsBulkDeleteDialogOpen(true)} > - + Delete Selected ({selectedProjects.size}) )} @@ -399,7 +399,7 @@ function ProjectCard({ > {isSelectionMode && (
-
+
@@ -426,7 +426,7 @@ function ProjectCard({ /> ) : (
-
)}
@@ -501,7 +501,7 @@ function ProjectCard({
- + Created {formatDate(project.createdAt)}
@@ -543,7 +543,7 @@ function ProjectCard({ function CreateButton({ onClick }: { onClick?: () => void }) { return ( ); diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx index 5c003cf0..b26da5aa 100644 --- a/apps/web/src/app/roadmap/page.tsx +++ b/apps/web/src/app/roadmap/page.tsx @@ -122,8 +122,8 @@ export default function RoadmapPage() {
-
-
+
+
@@ -148,7 +148,7 @@ export default function RoadmapPage() { {roadmapItems.map((item, index) => (
- + {index + 1}.
@@ -156,13 +156,13 @@ export default function RoadmapPage() {

{item.title}

diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx index 7d1fda7f..ee202d8b 100644 --- a/apps/web/src/app/terms/page.tsx +++ b/apps/web/src/app/terms/page.tsx @@ -24,8 +24,8 @@ export default function TermsPage() {
-
-
+
+
@@ -47,7 +47,7 @@ export default function TermsPage() { editor.

- +

diff --git a/apps/web/src/app/why-not-capcut/page.tsx b/apps/web/src/app/why-not-capcut/page.tsx index 7fe6df66..b05860a6 100644 --- a/apps/web/src/app/why-not-capcut/page.tsx +++ b/apps/web/src/app/why-not-capcut/page.tsx @@ -7,8 +7,8 @@ export default function WhyNotCapcut() {
-
-
+
+
diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx index a640dc4c..2a5a3ac0 100644 --- a/apps/web/src/components/background-settings.tsx +++ b/apps/web/src/components/background-settings.tsx @@ -7,7 +7,7 @@ import { colors } from "@/data/colors"; import { useProjectStore } from "@/stores/project-store"; import { PipetteIcon } from "lucide-react"; -type BackgroundTab = "color" | "blur"; +type BackgroundTab = "color" | "blur-sm"; export function BackgroundSettings() { const { activeProject, updateBackgroundType } = useProjectStore(); @@ -20,7 +20,7 @@ export function BackgroundSettings() { }; const handleBlurSelect = (blurIntensity: number) => { - updateBackgroundType("blur", { blurIntensity }); + updateBackgroundType("blur-sm", { blurIntensity }); }; const tabs = [ @@ -30,7 +30,7 @@ export function BackgroundSettings() { }, { label: "Blur", - value: "blur", + value: "blur-sm", }, ]; @@ -40,12 +40,12 @@ export function BackgroundSettings() { - +

Background

@@ -60,7 +60,7 @@ export function BackgroundSettings() { activeProject?.backgroundColor || "#000000", }); } else { - updateBackgroundType("blur", { + updateBackgroundType("blur-sm", { blurIntensity: activeProject?.blurIntensity || 8, }); } @@ -100,7 +100,7 @@ function ColorView({ }) { return (
-
+
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx index bce84a46..92482559 100644 --- a/apps/web/src/components/editor/media-panel/tabbar.tsx +++ b/apps/web/src/components/editor/media-panel/tabbar.tsx @@ -82,7 +82,7 @@ export function TabBar() { onClick={() => setActiveTab(tabKey)} key={tabKey} > - + {tab.label}
); @@ -114,10 +114,10 @@ function ScrollButton({
); diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx index f218dc14..d1533736 100644 --- a/apps/web/src/components/editor/media-panel/views/media.tsx +++ b/apps/web/src/components/editor/media-panel/views/media.tsx @@ -169,7 +169,7 @@ export function MediaView() { if (item.type === "audio") { return ( -
+
Audio {item.duration && ( diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 639858d0..2c6cbf96 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -274,7 +274,7 @@ export function PreviewPanel() { const renderBlurBackground = () => { if ( !activeProject?.backgroundType || - activeProject.backgroundType !== "blur" || + activeProject.backgroundType !== "blur-sm" || blurBackgroundElements.length === 0 ) { return null; @@ -392,7 +392,7 @@ export function PreviewPanel() { return (
🎬
@@ -474,7 +474,7 @@ export function PreviewPanel() { width: previewDimensions.width, height: previewDimensions.height, backgroundColor: - activeProject?.backgroundType === "blur" + activeProject?.backgroundType === "blur-sm" ? "transparent" : activeProject?.backgroundColor || "#000000", }} @@ -489,7 +489,7 @@ export function PreviewPanel() { renderElement(elementData, index) ) )} - {activeProject?.backgroundType === "blur" && + {activeProject?.backgroundType === "blur-sm" && blurBackgroundElements.length === 0 && activeElements.length > 0 && (
@@ -675,7 +675,7 @@ function FullscreenToolbar({ style={{ width: `${progress}%` }} />
@@ -684,11 +684,11 @@ function FullscreenToolbar({
); @@ -722,7 +722,7 @@ function FullscreenPreview({ getTotalDuration: () => number; }) { return ( -
+
0 && (
@@ -868,7 +868,7 @@ function PreviewToolbar({
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx index e147ea65..61dd806b 100644 --- a/apps/web/src/components/editor/properties-panel/text-properties.tsx +++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx @@ -25,7 +25,7 @@ export function TextProperties({