Skip to content

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

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

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

Conversation

@nicomiguelino

Copy link
Copy Markdown
Contributor

Summary

  • Reworks index.html to use Tailwind CSS utility classes instead of custom CSS classes, using arbitrary-value bracket syntax (text-[...], bg-[linear-gradient(...)], shadow-[...], border-[...], rounded-[...]) to reproduce exact px/rem/gradient/shadow values from the original design.
  • Preserves all class names referenced by src/main.ts (.feed-card-title, .feed-card-date, .feed-card-source, .feed-card-excerpt) alongside the new utility classes.
  • Expresses the portrait-only .feed-card:nth-child(n+4) { display: none } rule as a self-referential arbitrary variant (portrait:[&:nth-child(n+4)]:hidden) directly on the templated card element, and reproduces the [hidden]-attribute override behavior for #feed-grid/#feed-error via [&[hidden]]:hidden, so no JS changes were needed.
  • Slims src/css/style.css down to just the Tailwind layer setup (@layer theme, base, utilities + the three imports), dropping all app-specific custom CSS now expressed as utilities. No @font-face needed — Inter is already provided by @screenly/edge-apps's base styles.
  • Bumps @screenly/edge-apps to ^1.3.0 (unreleased version that will ship Tailwind CSS support) in package.json. The lockfile intentionally stays as committed (pointing at 1.0.0) until 1.3.0 is actually published — this matches how the reference PRs handled it.
  • Regenerates all screenshots/*.webp files.

This follows the same conversion pattern already applied to:

Note: this repo has no development branch (only main), so this PR targets main directly, per guidance from the migration coordinator.

Test plan

  • bun run type-check passes
  • bun run build succeeds (pre-existing unrelated Rolldown import.meta/chunk-size warnings from @screenly/edge-apps's own bundled dev-tools/locale code, not caused by this change)
  • bun run screenshots (Playwright) regenerated successfully for all configured resolutions, tested against a local unpublished @screenly/edge-apps@1.3.0 tarball build (reverted afterwards; only the package.json version bump was kept, lockfile untouched)
  • Visually verified landscape (1920x1080), portrait (1080x1920), and a small-format (800x480) screenshot — layout, card grid, text, and the portrait 3-card limit all render correctly and match the pre-conversion design pixel-for-pixel (verified by diffing against the previous committed 1920x1080 screenshot)

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