Migrate Styles to TailwindCSS

[sortedcord]

No description provided.

[Copilot]

Pull request overview

This PR aims to migrate the application's styling to TailwindCSS v4, adding the necessary configuration and dependencies. However, the migration is incomplete and contains critical bugs that will break the application.

Changes:

• Added TailwindCSS v4.2.0, PostCSS, and Autoprefixer dependencies
• Created tailwind.config.ts with custom theme colors, fonts, and shadows
• Created postcss.config.cjs to configure Tailwind's PostCSS plugin
• Modified src/App.css to import Tailwind and removed some legacy demo styles

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tailwind.config.ts	New Tailwind configuration with custom theme including app colors, font families, and box shadows
postcss.config.cjs	PostCSS configuration enabling Tailwind and Autoprefixer plugins
src/App.css	Imports Tailwind CSS and removes demo styles, but critically removes styles still in use
package.json	Adds TailwindCSS v4.2.0, @tailwindcss/postcss, autoprefixer, and postcss as dev dependencies
pnpm-lock.yaml	Lock file updates for new dependencies and their transitive dependencies

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Critical CSS classes have been removed from this file but are still being used in the codebase. The following classes are referenced in the code but their styles have been deleted:

1. .appRoot - used in src/appShell/EditorLayout.tsx (line 249)
2. .previewVideo - used in src/components/PreviewPanel.tsx (line 44)
3. .previewPlaceholder - used in src/components/PreviewPanel.tsx (line 67)

These classes need to either:

• Be retained in the CSS file with their original styles, or
• Be migrated to Tailwind utility classes in the component files

Without these styles, the layout and visual appearance of the application will be broken.

[Copilot]

The hardcoded values in the body styles duplicate the custom theme colors defined in tailwind.config.ts. Consider using Tailwind utility classes instead:

Current:

body {
  margin: 0;
  background: #0b0e14;
  color: rgba(255, 255, 255, 0.92);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
}

Could be:

body {
  @apply m-0 bg-app-bg text-app-text font-ui;
}

This would leverage the theme configuration you've already defined and make future theme changes easier to maintain.

Suggested change

	margin: 0;
	background: #0b0e14;
	color: rgba(255, 255, 255, 0.92);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
	@apply m-0 bg-app-bg text-app-text font-ui;

[Copilot]

The PR title states "Migrate Styles to TailwindCSS", but the migration is incomplete. While TailwindCSS has been installed and configured, the vast majority of CSS classes in src/App.css (lines 21-651) remain as traditional CSS rather than being converted to Tailwind utility classes.

A complete migration would involve either:

1. Converting the existing CSS classes to Tailwind utility classes in the component files, or
2. Using Tailwind's @apply directive to compose the existing classes from Tailwind utilities

Currently, the PR has only:

• Added TailwindCSS dependencies
• Created configuration files
• Removed some demo/example styles
• Added a few global styles

The core application styles (.appTopBar, .panelHeader, .timelineRoot, etc.) have not been migrated to TailwindCSS at all.

[gigareggie]

Updated EditorLayout.tsx to use tailwind instead of the legacy styling in App.css. More components to migrate!

[sortedcord]

seems to have broken the TL Menu though

[sortedcord]

But yeah, looking at the code for the top level menu, I think it needs a complete refactor sooner than later

leenim/src/appShell/EditorLayout.tsx

Lines 249 to 313 in e365ccc

	<div className="h-screen w-screen flex flex-col bg-app-bg text-[color:var(--tw-color-app-text)] text-white">
	<div className="h-10 shrink-0 flex items-center gap-2 px-2 border-b border-white/10 bg-app-panel relative">
	<div className="relative flex items-center gap-1" ref={menuRootRef}>
	<button
	className={
	`px-2 py-1 rounded text-sm text-white/90 hover:bg-white/10 ` +
	(openMenu === "file" ? "bg-white/12" : "")
	}
	onClick={() => setOpenMenu((m) => (m === "file" ? null : "file"))}
	type="button"
	>
	File
	</button>
	<button
	className={
	`px-2 py-1 rounded text-sm text-white/90 hover:bg-white/10 ` +
	(openMenu === "edit" ? "bg-white/12" : "")
	}
	onClick={() => setOpenMenu((m) => (m === "edit" ? null : "edit"))}
	type="button"
	>
	Edit
	</button>
	<button
	className={
	`px-2 py-1 rounded text-sm text-white/90 hover:bg-white/10 ` +
	(openMenu === "view" ? "bg-white/12" : "")
	}
	onClick={() => setOpenMenu((m) => (m === "view" ? null : "view"))}
	type="button"
	>
	View
	</button>
	{openMenu ? (
	<div className="absolute top-full left-0 mt-1 w-56 rounded-lg border border-white/12 bg-app-panel shadow-lg overflow-hidden z-50">
	{openMenu === "file" ? (
	<>
	<button
	className="w-full text-left px-3 py-2 text-sm text-white/90 hover:bg-white/10"
	type="button"
	onClick={() => setOpenMenu(null)}
	>
	New Project (todo)
	</button>
	<button
	className="w-full text-left px-3 py-2 text-sm text-white/90 hover:bg-white/10"
	type="button"
	onClick={() => setOpenMenu(null)}
	>
	Open… (todo)
	</button>
	<div className="h-px bg-white/10 my-1" />
	<button
	className="w-full text-left px-3 py-2 text-sm text-white/90 hover:bg-white/10 flex items-center justify-between"
	type="button"
	onClick={handleQuit}
	>
	<span>Quit</span>
	<span className="text-xs text-white/55">
	{navigator.platform.toLowerCase().includes("mac") ? "Cmd+Q" : "Ctrl+Q"}
	</span>
	</button>
	</>
	) : null}

Edit: Created #4