# Motivation

We detected reproducibility issue when building v0.24.0:

https://github.com/dfinity/oisy-wallet/actions/runs/13393064153

~~I'm unsure which of the two following Tailwind fix was the reason of
the problem but, bumping Tailwind to latest version seems to resolve the
problem.~~

~~Tailwind v4.0.6 - Fix
[#16403](tailwindlabs/tailwindcss#16403
~~- Revert change to no longer include theme variables that aren't used
in compiled CSS ~~

~~Tailwind v4.0.7 - Fix
[#16414](tailwindlabs/tailwindcss#16414
~~- Fix sorting of numeric utility suggestions when they have different
magnitudes~~

~~I lean towards to former though. I could have try v4.0.6 but, v4.0.7
contains interesting fixes anyway.~~

It does not resolve the issue:
https://github.com/dfinity/oisy-wallet/actions/runs/13395505962/job/37413394328



# Changes

- Bump `@tailwindcss/postcss`, `@tailwindcss/vite` and `tailwindcss`.

This PR re-enables the changes necessary to remove unused theme
variables and keyframes form your CSS.

This change was initially landed as #16211 and then later reverted in
#16403 because we found some unexpected interactions with using `@apply`
and CSS variables in multi-root setups like CSS modules or Vue inline
`<style>` blocks that were no longer seeing their required variables
defined.

This issue is fixed by now ensuring that theme variables that are
defined within an `@reference "…"` boundary will still be emitted in the
generated CSS when used (as this would otherwise not generate a valid
stylesheet).

So given the following input CSS:

```css
@reference "tailwindcss";
.text-red {
  @apply text-red-500;
}
```

We will now compile this to:

```css
@layer theme {
  :root, :host {
    --text-red-500: oklch(0.637 0.237 25.331);
  }
}
.text-red {
  color: var(--text-red-500);
}
```

This PR also improves the initial implementation to not mark theme
variables as used if they are only used to define other theme variables.
For example:

```css
@theme {
  --font-sans:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;

  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

.default-font-family {
  font-family: var(--default-font-family);
}
```

This would be reduced to the following now as `--font-mono` is only used
to define another variable and never used outside the theme block:

```css
:root, :host {
  --font-sans:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --default-font-family: var(--font-sans);
}

.default-font-family {
  font-family: var(--default-font-family);
}
```

## Test plan

- See updated unit and integration tests
- Validated it works end-to-end by using a SvelteKit example