livepeer / livepeer/design-system

Replace Stitches with Tailwind CSS

Open
#152 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.