Skip to content

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

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

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

Conversation

@nicomiguelino

Copy link
Copy Markdown
Contributor

Summary

Part of the company-wide rollout converting edge-app repos to Tailwind CSS utility classes (see Screenly/clock-app#12 and Screenly/weather-app#6 for reference implementations).

  • Rewrote index.html templates to use Tailwind utility classes (arbitrary-value bracket syntax) instead of custom CSS classes, reproducing every clamp() font-size, box-shadow, gradient, and text-shadow value exactly.
  • Class names referenced by JS (querySelector/classList.add in src/main.ts and src/render.ts) are preserved verbatim: .severity-badge, .nws-content, .nws-preamble, .nws-forecast-list, .nws-wwwi-list, .wwwi-label, .wwwi-content, .period-label, .period-content.
  • Deliberate deviation from the standard pattern: this app has no shared @screenly/edge-apps app-shell (no <auto-scaler>/<app-header>), so src/input.css keeps the bare @import 'tailwindcss'; (with Preflight enabled) rather than switching to the theme/base/utilities layered split + @screenly/edge-apps/styles import. Several plain elements here (<ul>, <li>, <h2>, <h3>, <p>) rely on Preflight's reset for zeroed margins/padding and list-style: none; dropping Preflight without extensive compensating classes would risk visual regressions (e.g. reappearing bullet points/list indentation) for no benefit, since there's no design-system CSS being layered in anyway.
  • Status-banner color variants (status-banner-blue/red/orange/gray) and the "Actual" pulse animation (status-actual-pulse) are chosen dynamically at runtime via classList.add(...) based on the CAP alert's <status> value — these can't be expressed as static Tailwind utility classes on elements in index.html, so they're kept as plain CSS in src/input.css, unchanged.
  • Deleted src/nws.css — its rules (list resets, bullet ::before content, label coloring) are now inlined directly as Tailwind utilities on the NWS forecast/WWWI list templates.
  • Bumped @screenly/edge-apps to ^1.3.0 (unpublished; ships Tailwind support).
  • Regenerated screenshots/* for all supported resolutions.

Test plan

  • bun run type-check passes
  • bun run build succeeds (pre-existing, unrelated Vite warnings about import.meta/screenly.js module type only)
  • bun run screenshots (Playwright) regenerates all 10 resolution screenshots successfully
  • Visually verified rendered screenshots at 1920x1080 (landscape) and 1080x1920 (portrait) — layout, spacing, and colors match pre-migration design
  • Manually verified all four dynamic status-banner colors render correctly and pixel-identical to before, using temporarily-modified demo CAP data (not committed): blue (Exercise), red (Actual, including the pulse-animation class and stripe-pattern overlay), gray (Test), orange (Draft) — confirmed severity badge, keyword highlighting, and instruction-box styling all correct across severities
  • Confirmed all JS-referenced class names (severity-badge, nws-*, period-*, wwwi-*) still present and functional after conversion

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