Tailwind
You can use third party libraries to style your flows. In this example we are using tailwind.
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
MiniMap,
type Node,
type Edge,
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
import { initialNodes, initialEdges } from './nodes-and-edges';
import CustomNode from './CustomNode.svelte';
const nodes = writable<Node[]>(initialNodes);
const edges = writable<Edge[]>(initialEdges);
const nodeTypes = {
custom: CustomNode,
};
</script>
<div style="height:100vh;">
<SvelteFlow {nodes} {nodeTypes} {edges} fitView class="bg-teal-50">
<MiniMap />
<Controls />
</SvelteFlow>
</div>
⚠️
To surpress unknown prop warnings in the browser console, please refer to the guide.