New Edge Apps come with Tailwind CSS set up

An Edge App made with npx @screenly/edge-apps create now styles its page with Tailwind CSS utility classes, so you can lay out a screen in the markup without writing a stylesheet first. The Tailwind plugin was already part of the edge-apps-scripts build, so an existing app needs only the imports. Put these at the top of your stylesheet:

@layer theme, base, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import '@screenly/edge-apps/styles' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);

Keep the layer order line and the layer(base) on the library’s styles. Without them, the library’s base styles win over your utility classes, whatever their specificity.

Don’t use @import 'tailwindcss'; on its own. It includes Tailwind’s Preflight reset, which strips the borders and padding that components like <app-header> set for themselves.

Inside <auto-scaler>, size things with h-full and w-full rather than h-screen and w-screen. <auto-scaler> draws your app at its reference size and scales the result to fit the display, so viewport units measure the wrong box. The portrait: and landscape: variants work as expected:

<main class="flex h-full w-full items-center justify-center">
  <h1 class="text-6xl portrait:text-4xl">Today's specials</h1>
</main>