feat(create-template): enable Tailwind CSS for scaffolded Edge Apps - #63
Open
nicomiguelino wants to merge 5 commits into
Open
feat(create-template): enable Tailwind CSS for scaffolded Edge Apps#63nicomiguelino wants to merge 5 commits into
nicomiguelino wants to merge 5 commits into
Conversation
- Import tailwindcss in the scaffold stylesheet, using the @tailwindcss/vite plugin already wired into vite.config.ts - Replace scaffold's custom flex/layout CSS with Tailwind utility classes to demonstrate usage - Document Tailwind support and the auto-scaler h-full/w-full vs h-screen/w-screen gotcha in both READMEs
- reflects Tailwind CSS support added in this branch
- import tailwindcss/theme.css and utilities.css directly instead of the full tailwindcss package, avoiding Preflight's universal border/margin/ padding reset which silently overrides shadow-DOM :host styling on components like <app-header> - document the same guidance and warning in README.md
Contributor
There was a problem hiding this comment.
Pull request overview
Enables Tailwind CSS usage in the create-scaffolded Edge App template (and documents it) by importing Tailwind’s theme/utilities CSS and showcasing utility-class-based layout in the scaffolded HTML.
Changes:
- Add Tailwind CSS imports (theme + utilities) to the scaffold stylesheet and remove bespoke layout CSS.
- Update the scaffolded template markup to use Tailwind utility classes (including
portrait:variant). - Document Tailwind usage and the
<auto-scaler>sizing gotcha in both the template README and the root README.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/create-template/src/style.css | Adds Tailwind theme/utilities imports and removes custom layout CSS. |
| scripts/create-template/README.md | Documents Tailwind usage in scaffolded apps. |
| scripts/create-template/index.html | Replaces custom layout structure with Tailwind utility classes. |
| README.md | Adds a new “Styling with Tailwind CSS” section and usage guidance. |
| package.json | Bumps package version to 1.3.0. |
| package-lock.json | Updates lockfile version fields to 1.3.0. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- update the scaffold README to match the actual theme/utilities imports used in src/style.css, instead of the deprecated full 'tailwindcss' import - addresses Copilot review feedback on PR #63
- declare an explicit theme/base/utilities layer order and import @screenly/edge-apps/styles into the base layer, so Tailwind utility classes always win the cascade regardless of selector specificity - unlayered CSS otherwise beats layered CSS per the Cascade Layers spec, letting @screenly/edge-apps/styles's base rules (e.g. its user-select: none reset) silently override Tailwind utilities - document the same layered setup in README.md - addresses Copilot review feedback on PR #63
nicomiguelino
marked this pull request as ready for review
July 27, 2026 18:48
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
@tailwindcss/viteplugin already wired intovite.config.ts(just needed@import 'tailwindcss';in the scaffold stylesheet)<auto-scaler>gotcha (useh-full/w-full, noth-screen/w-screen, since it scales a fixed reference-size box rather than the real viewport)Test plan
create, linked the library, ran a build, and confirmed Tailwind utilities (including theportrait:variant) compiled intodist/css/style.cssnpm run lint,npm run format:check,npm run type-checkall pass