diff --git a/README.md b/README.md index f74bb09..f4b8e54 100644 --- a/README.md +++ b/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 +
+

Hello, Screenly!

+
+``` + +> [!IMPORTANT] +> Inside ``, use `h-full`/`w-full` instead of `h-screen`/`w-screen`. `` 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 `` 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 `` 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. diff --git a/package-lock.json b/package-lock.json index 034b5cf..d3314c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@screenly/edge-apps", - "version": "1.2.1", + "version": "1.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@screenly/edge-apps", - "version": "1.2.1", + "version": "1.3.0", "license": "MIT", "dependencies": { "@eslint/js": "^10.0.1", diff --git a/package.json b/package.json index ed38bdd..7b6797b 100644 --- a/package.json +++ b/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": [ diff --git a/scripts/create-template/README.md b/scripts/create-template/README.md index f0812c4..253d6b4 100644 --- a/scripts/create-template/README.md +++ b/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 ``, 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 diff --git a/scripts/create-template/index.html b/scripts/create-template/index.html index 32990d9..919f3fd 100644 --- a/scripts/create-template/index.html +++ b/scripts/create-template/index.html @@ -12,10 +12,10 @@ reference-height="1080" orientation="auto" > -
+
-
-

+
+

diff --git a/scripts/create-template/src/style.css b/scripts/create-template/src/style.css index 035e3ef..e79be54 100644 --- a/scripts/create-template/src/style.css +++ b/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); + } }