Tailwind CSS

In this example we are using Tailwind for styling the flow.

Import the Svelte Flow stylesheet into the base layer so that Tailwind can override the default styles.

index.css


@import '@xyflow/svelte/dist/style.css' layer(base);
@import 'tailwindcss';


<script lang="ts">
  import { SvelteFlow, Controls, MiniMap, type Node, type Edge } from '@xyflow/svelte';
 
  import './index.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
  import CustomNode from './CustomNode.svelte';
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
 
  const nodeTypes = {
    custom: CustomNode,
  };
</script>
 
<div class="w-full h-full">
  <SvelteFlow class="bg-teal-50 dark:bg-gray-900" bind:nodes {nodeTypes} bind:edges fitView colorMode="system">
    <MiniMap />
    <Controls />
  </SvelteFlow>
</div>