{"product":"edge-apps","releases":[{"date":"2026-07-28","entries":[{"areas":["developers"],"breaking":false,"content_html":"\u003cp\u003eAn Edge App made with \u003ccode\u003enpx @screenly/edge-apps create\u003c/code\u003e now styles its page with Tailwind CSS\nutility classes, so you can lay out a screen in the markup without writing a stylesheet first.\nThe Tailwind plugin was already part of the \u003ccode\u003eedge-apps-scripts\u003c/code\u003e build, so an existing app needs\nonly the imports. Put these at the top of your stylesheet:\u003c/p\u003e\n\u003cdiv class=\"code-block\"\u003e\n  \u003cbutton type=\"button\" class=\"code-copy\" aria-label=\"Copy code\" data-copy-code\u003e\n    \u003csvg data-copy viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\u003e\n      \u003crect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\"\u003e\u003c/rect\u003e\n      \u003cpath d=\"M5 15V5a2 2 0 0 1 2-2h10\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003csvg data-check viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\u003e\n      \u003cpath d=\"M20 6 9 17l-5-5\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n  \u003c/button\u003e\n  \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e@\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003elayer\u003c/span\u003e \u003cspan style=\"color:#6ab825;font-weight:bold\"\u003etheme\u003c/span\u003e, \u003cspan style=\"color:#6ab825;font-weight:bold\"\u003ebase\u003c/span\u003e, \u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eutilities\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e@\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eimport\u003c/span\u003e \u003cspan style=\"color:#ed9d13\"\u003e\u0026#39;tailwindcss/theme.css\u0026#39;\u003c/span\u003e \u003cspan style=\"color:#6ab825;font-weight:bold\"\u003elayer\u003c/span\u003e(\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003etheme\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e@\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eimport\u003c/span\u003e \u003cspan style=\"color:#ed9d13\"\u003e\u0026#39;@screenly/edge-apps/styles\u0026#39;\u003c/span\u003e \u003cspan style=\"color:#6ab825;font-weight:bold\"\u003elayer\u003c/span\u003e(\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003ebase\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e@\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eimport\u003c/span\u003e \u003cspan style=\"color:#ed9d13\"\u003e\u0026#39;tailwindcss/utilities.css\u0026#39;\u003c/span\u003e \u003cspan style=\"color:#6ab825;font-weight:bold\"\u003elayer\u003c/span\u003e(\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eutilities\u003c/span\u003e);\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cp\u003eKeep the layer order line and the \u003ccode\u003elayer(base)\u003c/code\u003e on the library\u0026rsquo;s styles. Without them, the\nlibrary\u0026rsquo;s base styles win over your utility classes, whatever their specificity.\u003c/p\u003e\n\u003cp\u003eDon\u0026rsquo;t use \u003ccode\u003e@import 'tailwindcss';\u003c/code\u003e on its own. It includes Tailwind\u0026rsquo;s Preflight reset, which\nstrips the borders and padding that components like \u003ccode\u003e\u0026lt;app-header\u0026gt;\u003c/code\u003e set for themselves.\u003c/p\u003e\n\u003cp\u003eInside \u003ccode\u003e\u0026lt;auto-scaler\u0026gt;\u003c/code\u003e, size things with \u003ccode\u003eh-full\u003c/code\u003e and \u003ccode\u003ew-full\u003c/code\u003e rather than \u003ccode\u003eh-screen\u003c/code\u003e and\n\u003ccode\u003ew-screen\u003c/code\u003e. \u003ccode\u003e\u0026lt;auto-scaler\u0026gt;\u003c/code\u003e draws your app at its reference size and scales the result to fit the\ndisplay, so viewport units measure the wrong box. The \u003ccode\u003eportrait:\u003c/code\u003e and \u003ccode\u003elandscape:\u003c/code\u003e variants work\nas expected:\u003c/p\u003e\n\u003cdiv class=\"code-block\"\u003e\n  \u003cbutton type=\"button\" class=\"code-copy\" aria-label=\"Copy code\" data-copy-code\u003e\n    \u003csvg data-copy viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\u003e\n      \u003crect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\"\u003e\u003c/rect\u003e\n      \u003cpath d=\"M5 15V5a2 2 0 0 1 2-2h10\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003csvg data-check viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\u003e\n      \u003cpath d=\"M20 6 9 17l-5-5\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n  \u003c/button\u003e\n  \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003emain\u003c/span\u003e \u003cspan style=\"color:#bbb\"\u003eclass\u003c/span\u003e=\u003cspan style=\"color:#ed9d13\"\u003e\u0026#34;flex h-full w-full items-center justify-center\u0026#34;\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u0026lt;\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eh1\u003c/span\u003e \u003cspan style=\"color:#bbb\"\u003eclass\u003c/span\u003e=\u003cspan style=\"color:#ed9d13\"\u003e\u0026#34;text-6xl portrait:text-4xl\u0026#34;\u003c/span\u003e\u0026gt;Today\u0026#39;s specials\u0026lt;/\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003eh1\u003c/span\u003e\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;/\u003cspan style=\"color:#6ab825;font-weight:bold\"\u003emain\u003c/span\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/div\u003e\n","description":"Apps scaffolded with create use Tailwind CSS utility classes from the start, and the same 3 imports turn them on in an existing Edge App.","title":"New Edge Apps come with Tailwind CSS set up","type":"improvement","url":"https://www.screenly.io/releases/edge-apps/1.3.0/tailwind-css/"}],"json":"https://www.screenly.io/releases/edge-apps/1.3.0/v1.json","product":"edge-apps","product_label":"Edge Apps library","url":"https://www.screenly.io/releases/edge-apps/1.3.0/","version":"1.3.0"}],"title":"Edge Apps library 1.3.0","url":"https://www.screenly.io/releases/edge-apps/1.3.0/","version":1}