Tailwind CSS v4 (#450)

* Initial migration to Tailwind 4 (and layerstack/svelte-ux @next)

* Format project

* Update all the non-transparent CSS variables to remove the hard coded `hsl()` (as variable now includes the color function)

* fix(LinearGradient): Handle `tw-gradient-[from|to]` no longer inheriting

* Cleanup

* fix(Spline): Pass `fillOpacity` prop (instead of `fill-opacity`) to support Canvas

* Update semi-transparent CSS variable usage to use `opacity`, `fillOpacity` or `color-mix()` depending on the usage

* Add changeset

* Use `1%` instead of `0%` opacity for gradient examples to workaround gray gradient issue due to TW4's use of `color-mix()`

details: https://bsky.app/profile/techniq.dev/post/3lk6qr6e5b22t

* Refine getting started

* Restore prose heading styling (size/bold/margin)

* fix: Support `opacity` prop/style when Canvas rendered for all primatives

* docs(LineChart): Fix "Gradient threshold" highlight and tooltip color

Author: techniq

.changeset/pink-showers-hunt.md

@@ -0,0 +1,5 @@
+---
+'layerchart': major
+---
+
+Tailwind 4 support

.changeset/polite-parts-learn.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Support `opacity` prop/style when Canvas rendered for all primatives

.changeset/witty-clocks-divide.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Spline): Pass `fillOpacity` prop (instead of `fill-opacity`) to support Canvas

packages/layerchart/package.json

@@ -27,6 +27,7 @@
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
@@ -66,9 +67,9 @@
     "svelte": "5.20.4",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^1.0.0",
+    "svelte-ux": "2.0.0-next.1",
     "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.12",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
@@ -81,10 +82,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "^1.0.0",
-    "@layerstack/svelte-stores": "^1.0.0",
-    "@layerstack/tailwind": "^1.0.0",
-    "@layerstack/utils": "^1.0.0",
+    "@layerstack/svelte-actions": "1.0.1-next.0",
+    "@layerstack/svelte-stores": "1.0.2-next.0",
+    "@layerstack/tailwind": "2.0.0-next.1",
+    "@layerstack/utils": "1.1.0-next.0",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",

packages/layerchart/postcss.config.cjs

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

packages/layerchart/src/lib/components/Arc.svelte

@@ -80,6 +80,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = 'none';
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -221,9 +222,10 @@
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
-  fill-opacity={fillOpacity}
+  {fillOpacity}
   {stroke}
   stroke-width={strokeWidth}
+  {opacity}
   class={className}
   {...$$restProps}
   {onclick}

packages/layerchart/src/lib/components/Area.svelte

@@ -61,6 +61,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -166,7 +167,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -178,7 +179,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    fillKey && fillOpacity && strokeKey && strokeWidth && className;
+    fillKey && fillOpacity && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -228,6 +229,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     {...$$restProps}
     class={cls('path-area', className)}
     on:click={onclick}

packages/layerchart/src/lib/components/Bar.svelte

@@ -5,8 +5,6 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { createDimensionGetter, type Insets } from '../utils/rect.js';
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -37,8 +35,10 @@
   export let y1: Accessor = undefined;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke = 'black';
   export let strokeWidth = 0;
+  export let opacity: number | undefined = undefined;
   export let radius = 0;
 
   /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
@@ -113,19 +113,18 @@
       z`
     .split('\n')
     .join('');
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
 </script>
 
 {#if _rounded === 'all' || _rounded === 'none' || radius === 0}
   <Rect
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
     rx={_rounded === 'none' ? 0 : radius}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}
@@ -138,10 +137,12 @@
   <Spline
     {pathData}
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}

packages/layerchart/src/lib/components/Bars.svelte

@@ -38,6 +38,8 @@
   export let strokeWidth = 0;
   export let radius = 0;
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
   export let insets: Insets | undefined = undefined;
@@ -64,8 +66,10 @@
         {x1}
         {y1}
         fill={fill ?? ($config.c ? $cGet(d) : null)}
+        {fillOpacity}
         {stroke}
         {strokeWidth}
+        {opacity}
         {radius}
         {insets}
         {spring}

packages/layerchart/src/lib/components/Circle.svelte

@@ -26,6 +26,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -59,7 +60,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -78,6 +79,7 @@
       fillOpacity &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -114,6 +116,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}