Upgrade to Tailwind v4

[berekuk]

new classes

Tailwind v4 CSS classes are incompatible with v3. I updated all classes in the unfinished #3611 PR, but if it becomes stale (very probable), it will be necessary to do this again.

configs

JS configs in Tailwind v4 are deprecated (still supported but we should migrate away; mixing old configs with new CSS-based syntax has its own complications).

So, we'd have to:

• remove tailwind.config.* files everywhere

tw3 proxy for versioned-components

Tailwind v3 classes are not compatible with Tailwind v4.

Possible solution:

1. Compile all styles for squiggle-components that used v3, with important: "tw3" selector, and commit these styles to versioned-components package. All packages that use versioned-components should import this styles file.

(I'm not sure if this file should contain preflight).

2. Wrap old components with tw3 proxy.

function makeTw3Proxy<T extends FC>(Component: any) {
  return function Tw3Proxy(props: Parameters<T>[0]) {
    return (
      <div className="tw3">
        <Component {...props} />
      </div>
    );
  };
}

function wrapWithTw3Proxy<T>(lib: T): T {
  return {
    ...lib,
    SquigglePlayground: makeTw3Proxy((lib as any).SquigglePlayground),
    SquiggleChart: makeTw3Proxy((lib as any).SquiggleChart),
  } as T;
}

// Then, in `squiggleComponentsByVersion`:
  switch (version) {
    case "0.8.5":
      return wrapWithTw3Proxy(
        (await import(
          "squiggle-components-0.8.5"
        )) as unknown as SquiggleComponentsPackageTypes[T]
      );
    case "0.8.6":
      return wrapWithTw3Proxy(
        (await import(
          "squiggle-components-0.8.6"
        )) as unknown as SquiggleComponentsPackageTypes[T]
      );
// ...

handling nested imports in versioned-components

There's a potential problem with nested imports:

• @quri/squiggle-components v1 depends on @quri/ui v1
• @quri/squiggle-components v2 depends on @quri/ui v2
• we need styles from all of these sources

Currently, versioned-components does this:

  const srcGlobs = [
    "../../../node_modules/.pnpm/@quri+ui@*/node_modules/@quri/ui/src",
    "../node_modules/squiggle-components-*/src",
    "../../../packages/ui/src",
    "../../../packages/components/src",
  ];

In Tailwind v4, components packages (both v1 and v2 in the example above) would do @import "@quri/ui"; in CSS.

Would this work correctly? I know pnpm would install both versions of @quri/ui and make them available through node_modules/; does Tailwind rely on the same resolution mechanism when it runs imports?

This question is critical and needs to be checked before we upgrade. If Tailwind's resolution mechanism is different from Node.js, then I'm not sure how to upgrade.