feat: adopt Tailwind CSS utility classes for styling - #12
Draft
nicomiguelino wants to merge 4 commits into
Draft
Conversation
Bump @screenly/edge-apps to 1.3.0 (Tailwind CSS support) and rework index.html/style.css to use Tailwind utility classes instead of custom CSS, keeping style.css to just the design-system import and the Kelly Slab @font-face. Also skips Tailwind's preflight (importing tailwindcss/theme.css + utilities.css instead of the full package), since preflight resets border/padding on every element and breaks custom-element hosts like <app-header>. Screenshots regenerated to reflect current mock data/timestamps.
There was a problem hiding this comment.
Pull request overview
This PR migrates the app’s styling from custom CSS selectors to Tailwind utility classes, relying on @screenly/edge-apps Tailwind support and keeping only the design-system import + Kelly Slab font in the local stylesheet.
Changes:
- Bump
@screenly/edge-appsdevDependency to^1.3.0. - Replace most custom CSS-driven layout/typography in
index.htmlwith Tailwind utility classes (including portrait variants and arbitrary values). - Slim
src/css/style.cssto Tailwind theme/utilities imports (skipping preflight), the design-system import, and the@font-face.
Reviewed changes
Copilot reviewed 3 out of 13 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/css/style.css |
Switches styling foundation to Tailwind theme/utilities imports (no preflight) and keeps only font + design-system import. |
package.json |
Updates @screenly/edge-apps version requirement. |
index.html |
Replaces custom CSS classes with Tailwind utilities for layout and presentation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Address Copilot review feedback: the design-system import (@screenly/edge-apps/styles) was unlayered while Tailwind's pieces were layered, so per CSS Cascade Layers, its rules would always beat Tailwind utility classes on any conflicting selector regardless of specificity. Wrap it in layer(base) with an explicit theme/base/utilities order, matching the pattern now documented in the edge-apps-library README.
Address Copilot review feedback: without #app being display:flex in
portrait, main's flex-1/h-full had no flex container to size against,
so main stretched to #app's full height instead of the remaining
space below <app-header>, overflowing 50px past #app's bottom edge
and shifting content's vertical centering off. Restores the original
CSS's #app { display:flex; flex-direction:column } behavior for
portrait mode. Verified via computed-style checks (main's bottom now
aligns with #app's) and a portrait screenshot comparison.
- Add mock-data.yml to .gitignore (local dev-only generated file) - Regenerate screenshots to reflect the #app portrait flex fix, verified on Pi 5 and Anywhere players
This was referenced Jul 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@screenly/edge-appsto^1.3.0(Tailwind CSS support, not yet published — matches the version in thetailwind-supportbranch)index.htmlto use Tailwind utility classes instead of custom CSS classes, keeping visual appearance and behavior unchangedsrc/css/style.cssdown to just the design-system import and the Kelly Slab@font-facetailwindcss/theme.css+tailwindcss/utilities.cssinstead of the fulltailwindcsspackage, skipping Preflight — it resetsborder/paddingon every element, which breaks custom-element hosts like<app-header>(its shadow DOM styles itself via:host)screenshots/*.webpto reflect current mock dataTest plan
bun testpasses (7/7)bun run screenshots(all 10 pass)