@screenly/edge-apps 1.2.1 → 1.3.0

package/README.md

@@ -150,6 +150,35 @@ signalReady()
 
 This library includes reusable web components for building consistent Edge Apps. See the [components documentation](https://github.com/Screenly/edge-apps-library/blob/main/docs/components.md) for usage details.
 
+## Styling with Tailwind CSS
+
+Edge Apps scaffolded with `create` come with [Tailwind CSS](https://tailwindcss.com/) enabled out of the box via `@tailwindcss/vite` — no extra install or config file needed. Just add the import to your app's stylesheet:
+
+```css
+@layer theme, base, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
+```
+
+> [!IMPORTANT]
+> Declare the layer order up front with `@layer theme, base, utilities;`, and import `@screenly/edge-apps/styles` (and any other unlayered base CSS) into the `base` layer. Per the CSS Cascade Layers spec, unlayered CSS always beats layered CSS regardless of selector specificity — so without this, `@screenly/edge-apps/styles`'s base rules (e.g. its `user-select: none` reset) would silently override Tailwind utility classes.
+
+Then use utility classes directly in your markup instead of writing custom CSS:
+
+```html
+<main class="flex h-full w-full items-center justify-center">
+  <h1 class="text-6xl portrait:text-4xl">Hello, Screenly!</h1>
+</main>
+```
+
+> [!IMPORTANT]
+> Inside `<auto-scaler>`, use `h-full`/`w-full` instead of `h-screen`/`w-screen`. `<auto-scaler>` renders its content into a fixed-size box (the `reference-width`/`reference-height` you pass it) and scales that box to fit the real viewport with a CSS transform. Viewport-relative utilities (`h-screen`, `w-screen`, or arbitrary `vh`/`vw` values) measure the real viewport, not the scaled box, so they won't line up with the rest of your layout. The `portrait:`/`landscape:` variants are unaffected since they're based on device orientation, which `<auto-scaler>` uses the same way.
+
+> [!WARNING]
+> Avoid `@import 'tailwindcss';` (the full package) in an Edge App. It includes Preflight, which resets `border`, `margin`, and `padding` to `0` on every element via a universal selector — including custom-element hosts. Components like `<app-header>` style themselves through `:host` in their own shadow DOM (border, padding, etc.), and Preflight's reset silently overrides that styling from outside, since the host tag itself is a normal element in your page's light DOM. Import `tailwindcss/theme.css` and `tailwindcss/utilities.css` directly instead, as shown above, to get Tailwind's utility classes without Preflight.
+
 ## Edge Apps Scripts CLI
 
 This package provides the `edge-apps-scripts` CLI tool for running shared development commands across all Edge Apps. It includes centralized ESLint configuration to avoid duplication.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@screenly/edge-apps",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A TypeScript library for interfacing with Screenly Edge Apps API",
   "type": "module",
   "sideEffects": [
@@ -104,7 +104,7 @@
     "jsdom": "^28.1.0",
     "offline-geocode-city": "^1.0.2",
     "panic-overlay": "^1.0.51",
-    "sharp": "^0.34.5",
+    "sharp": "^0.35.3",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.57.0",

package/scripts/create-template/README.md

@@ -16,6 +16,8 @@ Install dependencies:
 {{PM_RUN}} dev
 ```
 
+Styling uses [Tailwind CSS](https://tailwindcss.com/) utility classes, enabled via the `tailwindcss/theme.css` and `tailwindcss/utilities.css` imports in `src/style.css`. Inside `<auto-scaler>`, use `h-full`/`w-full` rather than `h-screen`/`w-screen` — see the [`@screenly/edge-apps` README](https://github.com/Screenly/edge-apps-library#styling-with-tailwind-css) for details.
+
 ## Build
 
 ```bash

package/scripts/create-template/index.html

@@ -12,10 +12,10 @@
       reference-height="1080"
       orientation="auto"
     >
-      <div id="app">
+      <div id="app" class="flex h-full w-full flex-col">
         <app-header show-date></app-header>
-        <main class="content">
-          <h1 id="message"></h1>
+        <main class="flex flex-1 items-center justify-center">
+          <h1 id="message" class="text-6xl portrait:text-4xl"></h1>
         </main>
       </div>
     </auto-scaler>

package/scripts/create-template/src/style.css

@@ -1,30 +1,22 @@
-@import '@screenly/edge-apps/styles';
+@layer theme, base, utilities;
 
-* {
-  box-sizing: border-box;
-}
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
 
-body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  font-family: 'Inter', system-ui, sans-serif;
-}
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
 
-#app {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    font-family: 'Inter', system-ui, sans-serif;
+  }
 
-#message {
-  color: var(--theme-color-primary, #972eff);
+  #message {
+    color: var(--theme-color-primary, #972eff);
+  }
 }