Missing color config for tailwind.config.js in "Getting Started" section of the docs

[fromaline]

Hey @techniq,

I noticed that the "Getting Started" section of the documentation for LayerChart doesn’t mention the need to update tailwind.config.js with the following configuration:

surface: {
  content: "hsl(var(--card-foreground) / <alpha-value>)",
  100: "hsl(var(--background) / <alpha-value>)",
  200: "hsl(var(---muted) / <alpha-value>)",
  300: "hsl(var(--background) / <alpha-value>)"
},

I was lost for a few hours, trying to understand why I didn't see the axis, grid, etc. It's very unintuitive in my opinion.

Btw, thanks for your work on LayerChart!

[techniq]

Hey @fromaline, sorry for the confusion. These colors are defined by default when using Svelte UX, but I need to call this out for other frameworks. I currently have all the major Svelte libraries documented in #160, but need to add this to the Getting Started section. I would kindly review a PR if you get time, but I hope to "soon"

[fromaline]

@techniq, thanks for your answer! I’ll give it a shot if I find the time.

By the way, is it possible to use SVG/images as axis ticks in LayerChart?

[techniq]

@fromaline TBH I've never tried, but should be possible using the SVG image element and overriding the tickLabel slot on Axis. At some point would probably need to create an Image primitive (similar to rect/Rect, etc) to make it easy to support Canvas rendering context as well (via drawImage() (GeoTile does this mostly already)