Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

Tailwind CSS

This example shows how to integrate Tailwind CSS with Svelte Flow. Learn how to use Tailwind’s utility classes to style nodes, edges, and other flow components while maintaining a consistent design system across your application.

<script lang="ts"> 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'; let nodes = $state.raw<Node[]>(initialNodes); let edges = $state.raw<Edge[]>(initialEdges); const nodeTypes = { custom: CustomNode, }; </script> <SvelteFlow bind:nodes {nodeTypes} bind:edges fitView class="bg-[#f7f9fB]"> <MiniMap /> <Controls /> </SvelteFlow>
Last updated on