livepeer / livepeer/design-system
Replace Stitches with Tailwind CSS
- Dominant language
- TypeScript
- Stars
- 6
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
## Context
This design system uses [Stitches](https://stitches.dev/) for styling, which was [sunset in 2023](https://github.com/stitchesjs/stitches/discussions/1149) and is no longer maintained. This is blocking downstream consumers — notably the [Explorer](https://github.com/livepeer/explorer), which cannot modernize its styling or centralize breakpoint logic until the design system moves off Stitches.
See livepeer/explorer#579 for the downstream impact this is causing.
## Why move away from Stitches
- **Unmaintained** — no updates since 2023, open issues/PRs unaddressed
- **No SSR streaming support** — incompatible with React Server Components and Next.js App Router
- **No JS breakpoint hooks** — leads to hardcoded pixel values diverging from CSS breakpoints
- **Ecosystem momentum** — Tailwind has broad tooling support, better DX, and active maintenance
## Goal
Migrate the design system from Stitches to [Tailwind CSS](https://tailwindcss.com/) (v4), so that:
1. All components are styled with Tailwind utility classes instead of Stitches `css()` / `styled()`
2. Theme tokens (colors, spacing, breakpoints, etc.) are defined via Tailwind's `@theme` directive and exposed as CSS variables
3. Downstream consumers (Explorer, etc.) can adopt Tailwind and share a single source of truth for design tokens
4. SSR streaming and React Server Components are unblocked
## Scope
- Audit all Stitches usage across the design system components
- Replace `styled()` / `css()` calls with Tailwind utility classes
- Migrate theme tokens to Tailwind `@theme` CSS variables
- Update component exports so consumers can use Tailwind-based components
- Update documentation and examples
## Related
- livepeer/explorer#579 — Centralize breakpoint logic when migrating to Tailwind (downstream)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by auditing Stitches usage across the design system components, including styled() and css() calls, then review the theme tokens, component exports, documentation, and examples. Done means components use Tailwind utility classes, tokens are exposed through Tailwind @theme CSS variables, and downstream consumers can adopt the shared Tailwind-based design system.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100