Tailwind 4 compatibility

[techniq]

Tailwind 4 now declares CSS variables WITH a color function such as:

@import 'tailwindcss';
@source '../node_modules/layerchart/**/*.{svelte,js}';

@theme {
    --color-primary: hsl(257.4075 100% 50%);
    --color-surface-100: hsl(180 100% 100%);
    --color-surface-200: hsl(0 0% 94.902%);
    --color-surface-300: hsl(180 1.9608% 90%);
    --color-surface-content: hsl(215 27.907% 16.8627%);
}

which means they are now used via var(--color-primary) instead of hsl(var(--color-primary)) when referenced directly, such as for the default series color. Both TW3 and TW4 work the same when used via a class, such as fill-primary or stroke-surface-content.

Declaring with the color function is much nicer as this means all color functions (hsl(), rgb(), oklch(), ...) can be used out of the box without needing to know the original color space.

In LayerChart 2.0 we will default to Tailwind 4 usage, but until then, you can explicitly provide the default series color using:

<AreaChart
  {data}
  x="date"
  y="value"
  series={[{ key: 'value', color: 'var(--color-primary)' }]}
/>

See this repo for an example.

[techniq]

More context:

It comes down to knowing how the --color-primary (and others) are set.

In Tailwind 3, you would declare it as:

:root {
  --color-primary: 200 100% 50%
}

and then declare in your tailwind.config.js as

module.exports = {
  theme: {
    colors: {
      // Using modern `hsl`
      primary: 'hsl(var(--color-primary))'
    }
  }
}

In Tailwind 4, you define them in your CSS file only (in @theme declaration WITH the color space function (rgb(), hsl(), oklch(), etc)

@import "tailwindcss";
@theme {
  --color-primary: hsl(200 100% 50%);
}

this means var(--color-primary) will resolve as 200 100% 50% on TW3 and needs to be wrapped in hsl(var(--color-primary)), but in TW4 it's just var(--color-primary) which resolves to hsl(200 100% 50%)

98% of the time LayerChart uses tailwind colors via classes (stroke-primary, fill-surface-100, etc) with the one big exception being setting a default series color for the simplified charts
Hopefully I can find a solution that works for TW3 and TW4 as I'd rather not break TW3 usage (just yet) to support TW4

[techniq]

I thought I had a solution to support TW3 and TW4 at the same time, but I believe theme(colors.primary) resolves at build time and thus still becomes hsl(hsl(...)) (still need to think through why this is happening exactly tbh).

[jffaust]

I'm using Tailwind v4 in my app with LayerChart and I just want to report that the arbitrary values are not working because they changed the syntax in v4.

Example: TooltipItem's color

Here's the Tailwind Migration Guide for variables in arbitrary values

[techniq]

Hey @jffaust 👋. Only the shorthand CSS variables had a breaking change (bg-[--color] => bg-(--color)) but if you have an explicit var(...) it works in both TW3 and TW4 (bg-[var(--color)]). See this play.tailwindcss.com example (version 4.0.7)

I updated all the CSS variables to use this explicit var() in layerchart@0.95.0 so maybe you're not on the latest?

I have an example TW4 project setup here

The only compatibility issue is the resolution of theme CSS variables (var(--color-primary)) due to the color function being included (which is much better than TW3).

Because of this, you have to be explicit with default series colors (to override the hsl(var(--color-primary)) with var(--color-primary).

<AreaChart
  {data}
  x="date"
  y="value"
  series={[{ key: 'value', color: 'var(--color-primary)' }]}
/>

[jffaust]

I was using v0.93.5. I just tested with the latest and it's working (although with HSL and not variables, ie hsl(22 24% 49%)). Thanks for the detailed answer and the awesome work ❤️

[benquan]

This is too important for not to appear in the documentation. I have been trying to do a simple example and it was not working because

@source '../node_modules/layerchart/**/*.{svelte,js}';

@theme {
    --color-primary: hsl(257.4075 100% 50%);
    --color-surface-100: hsl(180 100% 100%);
    --color-surface-200: hsl(0 0% 94.902%);
    --color-surface-300: hsl(180 1.9608% 90%);
    --color-surface-content: hsl(215 27.907% 16.8627%);
}

is never mentioned in the documentation.