LayerChart v1 (tested on v1.0.13 with SvelteKit + Tailwind 3 JIT) applies its own Tailwind-style utility classes internally — fill-none, stroke-surface-content, stroke-surface-content/10, overflow-visible, and fill-surface-content. Because these classes appear only inside LayerChart's pre-compiled Svelte bundle, Tailwind's JIT scanner never sees them in your template source, so it never generates the corresponding CSS rules. The result is a chart that looks correct in dev tools (elements exist, attributes are set) but renders completely wrong: paths with fill-none get SVG's default fill: black, axis labels inside a nested <svg class="overflow-visible"> are clipped because overflow-visible is never compiled (SVG defaults to overflow: hidden), and grid lines / tick marks using stroke-surface-content/10 get stroke: none because the surface-content color token doesn't exist in the project's Tailwind config.
What makes this particularly hard to debug is that everything looks right in the DOM inspector. The classes are applied. The elements exist. The text nodes have correct content. You can even query them with getComputedStyle() and see reasonable-looking values — until you check computedFill on a path element and discover it's rgb(0, 0, 0) despite the element having class="fill-none". The mental trap is assuming that if a standard Tailwind utility class like fill-none is on an element, it must be working — but JIT only compiles classes it finds in scanned files, and node_modules is excluded by default.
The fix has two parts. First, for props that LayerChart accepts as direct SVG attributes (stroke, fill, strokeWidth), pass them as props: <Spline stroke="#4289B3" fill="none" strokeWidth={2} />. This bypasses the class-based theming entirely. Second, for classes LayerChart applies internally that you can't override via props (axis labels, grid lines, tick marks, nested SVG overflow), add a scoped <style> block in your wrapper component with :global() selectors targeting the specific classes:
div :global(.fill-surface-content) { fill: #334155; }
div :global(.stroke-surface-content\/10) { stroke: rgba(51,65,85,0.1); }
div :global(.stroke-surface-content\/50) { stroke: rgba(51,65,85,0.5); }
div :global(.overflow-visible) { overflow: visible !important; }
div :global(.fill-none) { fill: none; }
div :global(.tickLabel) { font-size: 12px !important; font-weight: 400 !important; }The deeper lesson: any component library that uses Tailwind utility classes in its own templates — not as configurable props, but hardcoded in its Svelte/React/Vue source — will break under Tailwind JIT unless those classes are also present somewhere in your project's scanned content. This is not unique to LayerChart. The same failure mode applies to any library that assumes Tailwind theme tokens (surface-content, surface-100) exist in the consuming project's config. The failure is always silent: no error, no warning, just wrong rendering. Always inspect getComputedStyle() on the actual SVG elements when a chart looks wrong — the classes tell you what the developer intended, the computed values tell you what actually happened.