Migrate styling from Tailwind/clsx to Stylex and add sx helper

[nwthomas]

Motivation

• Replace Tailwind CSS + clsx usage with a compact, runtime-safe CSS-in-JS utility (@stylexjs/stylex) to centralize styling and reduce Tailwind/tooling surface in the repo.
• Provide a small sx helper and a set of utility styles to express common layout and typographic patterns consistently across components.
• Move global styles off Tailwind layers into a minimal set of CSS custom properties and base rules that work with the new utility layer.

Description

• Added a new StyleX utility module at app/styles/tw.stylex.ts exposing sx(...), utilityStyles, and u and wired it into components across the app.
• Replaced many className/clsx usages with sx(...) calls across components and pages (examples: Navbar, Footer, Image, ImageOverlay, ThemeSwitch, ErrorBoundary, BookCard, RecentlyPlayed, writing-related components, and several MDX block components).
• Reworked global styles in app/globals.css to use CSS custom properties and base rules rather than Tailwind directives, and removed the Tailwind configuration (tailwind.config.js deleted).
• Added StyleX build/runtime integration: babel.config.json and postcss.config.js now include the @stylexjs plugins, and package.json/bun.lock updated to add @stylexjs/* dependencies and remove Tailwind/clsx where applicable.
• Adjusted OpenGraph image route implementations (opengraph-image/route.tsx and (writing) slug OG route) to use inline style objects rather than Tailwind props for the ImageResponse JSX.
• Small layout updates to use sx utilities (e.g. app/layout.tsx, app/page.tsx, app/(writing)/[slug]/page.tsx) and exported u alias for utilities.

Testing

• No automated tests were executed as part of this change.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
personal-portfolio	Ready	Preview, Comment	Jun 25, 2026 11:43pm