Styling

• Standalone app (no existing Tailwind / you want a reset): import @infoplaza/platform/styles.css. This includes Tailwind preflight (global element resets).
• Embedding (Next.js, an app that already runs Tailwind, or any app with its own global styles): import @infoplaza/platform/styles.embed.css. This ships only prefixed utilities with no preflight and no global element selectors (html, *, button, input, svg).

// Host app (Next.js etc.)
import '@infoplaza/platform/styles.embed.css'

Wrap the map, HUD, timeseries, or ensemble subtree in the ip-platform class. The prefix already prevents class collisions; the wrapper provides a stable scope for dark-mode / fullscreen context and the icon color hook. Packaged TimeseriesForecast and EnsembleForecast apply this class for you.

<div className="ip-platform" style={{ height: '100%' }}>
  <WeatherLayers showHud />
</div>

Exported icons render with fill: currentColor and are sized by the className you pass. For a host-agnostic default, add the ip-icon class and optionally drive color and size through CSS variables:

.ip-platform {
  --ip-icon-color: #1f2937;
  --ip-icon-size: 1.25rem;
}