Skip to content

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

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

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

Conversation

@nicomiguelino

Copy link
Copy Markdown
Contributor

Summary

  • Reworks index.html to use Tailwind CSS utility classes (with arbitrary-value bracket syntax for exact px/rem/gradients/shadows/colors) instead of custom app-owned CSS classes. Visual appearance and behavior are unchanged — this is a pure refactor.
  • Slims the CSS entry point (src/css/style.css) down to just the @screenly/edge-apps/styles design-system import layered correctly against Tailwind's theme/utilities layers. Deletes src/css/grid.css and src/css/kanban.css, since all their rules are now expressed as Tailwind utility classes directly on the corresponding elements (both static markup in index.html and dynamically-created elements in src/app.ts / src/kanban.ts).
  • Class names referenced by tests/JS (kanban-card, kanban-card-title, kanban-column, kanban-column-header, kanban-column-dot, kanban-column-title, kanban-cards, cell-pills, pill) are preserved verbatim alongside the new utility classes.
  • Table header/body rows and cells, which were previously styled purely via element/tag selectors (#data-table th, #data-table td, etc.) with no className set in src/app.ts, now get Tailwind utility classNames assigned at creation time. The "divider" line between rows (all but the last row) is now expressed via the [&:not(:last-child)]:bg-[...] arbitrary-variant pattern instead of a static CSS :last-child rule — same visual result, recomputed automatically by the browser as rows are added/removed by trimRowsToFit().
  • Bumps @screenly/edge-apps to ^1.3.0 (unpublished; ships Tailwind support).
  • Regenerates screenshots/* (grid + kanban views, all resolutions) to reflect the change (pixel-identical to before).

Reference/pilot migrations for this same rollout:

Test plan

  • bun run type-check — passes
  • bun run lint — passes
  • bun test --pass-with-no-tests src/ — 51 tests pass (including class-name assertions in kanban.test.ts / render.test.ts)
  • bun run format:check — passes
  • bun run build — succeeds
  • bun run screenshots — all 20 Playwright screenshot tests pass; visually confirmed grid view (landscape + portrait) and kanban view render correctly with no missing text or broken layout
  • Verified package.json/bun.lock are clean of the temporary local-tarball reference used to test against the unpublished @screenly/edge-apps@1.3.0 build; only the version bump string is committed, lockfile untouched

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