Skip to content

feat: adopt Tailwind CSS utility classes for styling - #6

Draft
nicomiguelino wants to merge 1 commit into
developmentfrom
chore/adopt-tailwind-css
Draft

feat: adopt Tailwind CSS utility classes for styling#6
nicomiguelino wants to merge 1 commit into
developmentfrom
chore/adopt-tailwind-css

Conversation

@nicomiguelino

Copy link
Copy Markdown
Contributor

Summary

  • Rework index.html to use Tailwind utility classes (with arbitrary-value bracket syntax for exact px/rem/gradient/shadow values) instead of custom CSS classes, keeping visual appearance and behavior unchanged.
  • Use the portrait: variant for the existing @media (orientation: portrait) overrides (timer card size, date/digit font sizes).
  • Slim src/css/style.css down to the standard Tailwind + @screenly/edge-apps/styles layered import, keeping only the custom @font-face rules for Inria Sans (not part of the design system tokens) and the --theme-color-primary custom property (read by progress-ring.ts via getComputedStyle).
  • No JS/TS changes needed — all interactive elements are targeted via data-* attributes and #id/svg[data-tick] selectors, none of which relied on the removed custom class names.
  • Bump @screenly/edge-apps to ^1.3.0 (unpublished; adds Tailwind CSS support) in package.json.
  • Regenerate all 10 screenshots to reflect the (visually identical) refactor.

This is part of the company-wide rollout of Tailwind CSS across edge-app repos. Reference/pilot implementations:

Test plan

  • bun run type-check passes
  • bun run build succeeds (only pre-existing/expected warnings, matching reference PRs)
  • bun run screenshots — all 10 Playwright screenshot tests pass
  • Visually reviewed landscape (1920x1080), portrait (1080x1920), and small-resolution (800x480) screenshots — timer card, progress ring, date text, and accent-colored timer digits all render correctly with no layout regressions
  • Temporary local tarball install of the unpublished @screenly/edge-apps@1.3.0 build used only for local verification, then fully reverted (package.json + bun.lock restored to committed state, with only the version-string bump re-applied); lockfile is untouched in this PR

Rework index.html to use Tailwind utility classes instead of custom CSS
classes, keeping visual appearance and behavior unchanged. Slim the CSS
entry point down to just the design-system import. Bump
@screenly/edge-apps to ^1.3.0 for upcoming Tailwind CSS support.
Regenerate screenshots to reflect the change.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant