Skip to content

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

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

feat: adopt Tailwind CSS utility classes for styling#9
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 instead of the custom CSS classes previously defined in src/css/style.css, keeping visual appearance and behavior unchanged (pure refactor, not a redesign).
  • All classes referenced by JS/tests (.error-container, .error-message, .error-details, .error-key, .error-value) are preserved verbatim alongside the new Tailwind utility classes.
  • The tr:last-child td { border-bottom: none } rule is reproduced via group on <tr> + group-last:border-b-0 on the <td>s (same technique used for position-based styling in the reference PRs).
  • The #embed-container iframe { border: 0 } descendant rule (targeting the iframe injected at runtime by powerbi-client) is reproduced with the arbitrary variant [&_iframe]:border-0 on #embed-container.
  • Slim src/css/style.css down to just the Tailwind layer/import setup (no app-specific CSS remains — the only custom styling was for the error screen, which used system font stacks already, so no @font-face needed to be preserved).
  • Bump @screenly/edge-apps to ^1.3.0 for upcoming Tailwind CSS support.

This follows the same migration pattern applied in:

Test plan

  • bun run type-check passes
  • bun run build succeeds (tested against a local unpublished @screenly/edge-apps@1.3.0 tarball build with Tailwind support; the tarball install was fully reverted afterward — only the ^1.3.0 version bump in package.json is committed, and the lockfile is left untouched/stale until 1.3.0 is actually published, matching the reference PRs)
  • Inspected the generated dist/css/style.css to confirm every arbitrary-value utility class used in index.html (colors, px values, border-b, group-last:, the [&_iframe]:border-0 variant, etc.) compiled to the expected CSS rules with correct values
  • Visual screenshot verification: this repo has no Playwright/screenshot tooling (no @playwright/test dependency, no screenshots/ directory, no edge-apps-scripts screenshots wiring, unlike clock-app/weather-app), so step could not be completed. Visual correctness was instead verified by manually cross-checking the compiled CSS output against the original CSS rule-by-rule.

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.
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