feat(frontend): tailwind v4 + shadcn/ui foundation + credentials migration#95
Merged
Conversation
Diseño aprobado en brainstorming: instalar Tailwind v4 mapeando tokens de marca a @theme, aislar el legacy landing CSS al route group (landing), e iniciar shadcn/ui con Button como smoke-test en credentials. Migración componente por componente bajo demanda; refactor full de la landing diferido. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Audit durante planning reveló que globals.css no es CSS de landing sino el design system de toda la app (clases .dash, .btn, .modal, .field, etc usadas por /app/* y /oauth/*). El plan original de mover a (landing) route group habría roto rutas autenticadas. Estrategia revisada: globals.css se queda en su lugar, se prepende Tailwind import + @theme. Migración gradual erosiona el legacy a medida que cada pantalla se mueve a shadcn. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
13 tareas en 5 fases: install Tailwind v4 → init shadcn → smoke-test Button en credentials → verificación workspace-wide → PR. Estrategia coexistencia: globals.css legacy untouched. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Foundation for tailwind adoption (feature/tailwind branch). No styles change yet — wiring only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@tailwindcss/postcss plugin wires Tailwind into Next.js 16's build per Next docs: node_modules/next/dist/docs/01-app/01-getting-started/11-css.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@import "tailwindcss" at top of globals.css; @theme block exposes brand colors (accent, bg, surface, text variants) and font slots as Tailwind utility classes (text-accent, bg-surface, font-display, ...). Legacy CSS untouched — coexistence strategy per spec. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
clsx + tailwind-merge for cn() helper; class-variance-authority for component variants; lucide-react for icons. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
clsx + tailwind-merge composition used by every shadcn component to compose className with conflict-aware merging. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
new-york style, RSC enabled, aliases match tsconfig paths. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Smoke-test component for the Tailwind/shadcn foundation. Consumed by credentials in next commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Smoke-test of the Tailwind + shadcn foundation. Proves end-to-end: @theme tokens -> @/components/ui/button -> consumed by feature code. Visual will be tuned to match brand in a follow-up PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… convention
ApiKeysSection and ConnectedAppsSection: outer <section> + header migrated
to Tailwind utility classes. `p-7!` suffix is used so the padding wins
against the legacy unlayered `* { padding: 0; margin: 0 }` reset, which
otherwise beats any `@layer utilities` rule per CSS Cascade L5.
Spec updated with a "Migration convention" section documenting:
- Why the universal reset was beating utility classes
- The @layer experiments that broke the rest of the app and were
reverted
- The `!` modifier convention for properties that fight the reset
(padding, margin) during the legacy/Tailwind coexistence period
- When `!` can be removed (once legacy is fully eradicated)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #94
Summary
Introduces Tailwind v4 and shadcn/ui to the
frontend/workspace via a coexistence-first strategy, and migrates the first two product sections (ApiKeysSection,ConnectedAppsSection) as a real-world test.@tailwindcss/postcss) +@themeblock mapping brand tokens (accent, bg, surface, text variants, fonts) to utility classesnew-yorkstyle, RSC) withcomponents.json,lib/utils.ts(cnhelper), and first primitive:ButtonButtonApiKeysSectionandConnectedAppsSectionmoved to Tailwind utility classes, using the!modifier convention discovered during this PRglobals.cssuntouchedThe
!modifier convention (new, documented in spec)The legacy
* { padding: 0; margin: 0 }reset is unlayered → beats Tailwind utilities (which live in@layer utilities). We tried@layer legacywrappers but every layer ordering either failed to override the reset or broke layouts elsewhere via Preflight winning over legacy.Convention: properties that fight the universal reset use Tailwind's
!suffix (Tailwind v4 syntax), e.g.p-7!→padding: 1.75rem !important. Other properties (gap,flex,bg-*,border-*,text-*) work normally without!.Full rationale + when to apply: see
Migration convention — the ! modifierin the spec.Spec & plan
docs/superpowers/specs/2026-05-17-tailwind-adoption-design.mddocs/superpowers/plans/2026-05-17-tailwind-adoption-foundation.mdTest plan
pnpm typecheck(workspace-wide) passespnpm test(workspace-wide) passes — 600+ tests greenpnpm --filter frontend buildsucceeds/renders unchanged (coexistence: legacy CSS untouched)/app/credentialsrenders with: shadcn Button on Generate, Tailwind-styled outer card + header on both API Keys and Connected Apps sections, list items + modals still use legacy styles intentionallypadding: 1.75remresolves on the<section>(was0before this PR due to the cascade issue)/oauth/authorize— needs test client; not blockingOut of scope (follow-up issues exist or will)
/app/*screens/oauth/authorizeconsent screen🤖 Generated with Claude Code