Styling

Style Niral apps with component-scoped CSS, global selectors, the standalone Tailwind integration and built-in transitions for interactive interfaces.

On this page 3 sections

Scoped styles

<style> blocks are scoped to their component — selectors are rewritten with a content-derived class so components never leak into each other. body, html and :root stay global; escape a selector with :global(.selector); opt a whole block out with <style global>.

Tailwind — no npm

niral add tailwind

Downloads the standalone Tailwind binary (one time), wires styles/tw.css into your shell, watches during niral dev, and minifies during niral build.

Transitions

<p transition:fade>appears and disappears smoothly</p>
<li transition:slide={{ duration: 300 }}>…</li>

{#for row of rows key row.id}
  <tr animate:flip>…</tr>     <!-- rows glide on reorder -->
{/for}

Enter plays on insert, leave plays before removal, FLIP animates reorders. All powered by the Web Animations API — SSR and hydration never flash.