Themes

Styling and Tailwind

SCSS, Tailwind, PrimeVue, and consistency across theme and apps.

Tailwind

The presentation kit @owdproject/kit-tailwind enables @nuxtjs/tailwindcss and aggregates content paths from modules that call registerTailwindPath. In your theme:

  • register runtime/components, runtime/pages, and any runtime/assets paths if classes appear there;
  • avoid dynamic class strings the purge step cannot see (use safelist when unavoidable).

PrimeVue

The @owdproject/kit-primevue kit registers @primevue/nuxt-module. Your theme can:

  • set presets / PrimeVue themes via nuxt.config or nuxt.options.primevue in module.ts;
  • ship SCSS partials (Win95-style) to tune Prime components to the OS look;
  • import PrimeVue components directly in theme .vue files — then declare primevue as a peer and add it to playground deps (see Create from scratch).

Apps should prefer neutral components where possible; the theme harmonizes spacing, borders, and colours.

Fonts and assets

Self-hosted fonts under runtime/assets/fonts, @font-face in SCSS — same pattern as reference themes.

Variants

For multi-variant themes (light/dark), prefer:

  • CSS or SCSS variables for tokens;
  • defaults on the theme module exposed via runtimeConfig.public.desktop.

There is no single mandatory contract yet: document supported keys in your theme README.

Related

Theme plugins

Client Nuxt plugins in themes — dialogs, addPlugin, ordering, and what not to put in plugins.

Pages and boot flow

start/boot routes, desktop lifecycle, and system composables.