Skip to content

fix(styles): import Tailwind's theme layer so spacing utilities work - #740

Merged
michaelpporter merged 2 commits into
mainfrom
tailwind-theme-layer
Jul 25, 2026
Merged

fix(styles): import Tailwind's theme layer so spacing utilities work#740
michaelpporter merged 2 commits into
mainfrom
tailwind-theme-layer

Conversation

@michaelpporter

Copy link
Copy Markdown
Owner

Fixes the root cause behind #736 and removes the workarounds it had accumulated. No issue number — this was never filed.

Stacked on #739 (→ #738#737). Merge in that order.

The bug

src/styles.css imported only tailwindcss/utilities. In Tailwind v4 the numeric --spacing scale lives in the theme layer, so every utility resolving against it had nothing to resolve to and was dropped at build time — 39 distinct classes across 15 files, silently.

Non-spacing utilities (.absolute, .flex, .items-center) compiled fine, which is exactly why this survived so long: most layouts still looked roughly right, just missing every gap, pad and offset.

The fix

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities";

Deliberately not @import "tailwindcss" — the full bundle also pulls in Preflight, a browser reset that would fight Obsidian's own app styling.

Verified the blast radius

  • All 39 utilities now appear in the compiled styles.css (checked programmatically against the built file, not the templates).
  • The two global rules Tailwind emits — :root,:host and *,::before,::after,::backdrop — declare custom properties exclusively, zero visual properties. Nothing leaks into Obsidian's styling.
  • Theme is tree-shaken to the 10 variables actually used. styles.css grows 5.4K → 8.1K.
  • Largest newly-live values are w-48/w-60/h-32 on settings controls (intended sizing that was missing) and scroll-mt-40, which only affects scrollIntoView anchoring — no layout shift.

Expect a real visual diff: slightly roomier spacing in the settings tab and side views, and correctly positioned floating buttons in codeblocks. It should be an improvement everywhere, but it is broad — worth an eyeball before release.

Workarounds removed

One missing import had produced three separate coping strategies in src/components/codeblocks/:

File Workaround Now
CodeblockTree hand-written .BC-codeblock-tree-{buttons,content} CSS keyed to Obsidian's --size-4-* vars (added in #739) top-2 right-2 z-10 / pr-10
CodeblockMarkmap inline style="z-index: 1; bottom: 0.5rem; right: 0.5rem" on the zoom toolbar bottom-2 right-2 z-10
CodeblockMermaid + CodeblockMarkmap copy buttons whose left-2 top-2 never applied — landing top-left by accident — and which disagreed on z-index left-2 top-2 z-10, applied for real

All three codeblocks now position buttons through the same mechanism. Mermaid and Markmap keep their long-standing top-left placement (now with the intended 8px offset); only the tree moved, per #736.

bun run build && bun run test pass (379 tests, 0 type errors).

Base automatically changed from 736-fr-move-the-buttons-to-the-up-right-in-tree-view-code-block to 734-bug-tree-view-fails-for-links-with-block-references July 25, 2026 15:50
@michaelpporter
michaelpporter force-pushed the 734-bug-tree-view-fails-for-links-with-block-references branch from 219d60a to ccb9690 Compare July 25, 2026 15:51
Base automatically changed from 734-bug-tree-view-fails-for-links-with-block-references to main July 25, 2026 15:52
src/styles.css imported only `tailwindcss/utilities`. In Tailwind v4 the
numeric `--spacing` scale lives in the theme layer, so every utility
resolving against it — 39 distinct classes across 15 files — was
silently dropped at build time. Non-spacing utilities (.absolute,
.flex) compiled fine, which is why most layouts still looked roughly
right and this went unnoticed.

Imports the theme layer only, not the full `tailwindcss` bundle, which
would also pull in Preflight and fight Obsidian's app styling. The
emitted globals (`:root,:host` and `*,::before,::after,::backdrop`)
declare custom properties exclusively — no visual properties leak into
Obsidian. Tree-shaken to 10 theme vars; styles.css grows 5.4K → 8.1K.

Removes the three workarounds the missing scale had accumulated in
src/components/codeblocks/:
- CodeblockTree: hand-written .BC-codeblock-tree-{buttons,content}
  rules keyed to Obsidian's --size-4-* vars, back to top-2/right-2/pr-10
- CodeblockMarkmap: inline `style="z-index: 1; bottom: .5rem;
  right: .5rem"` on the zoom toolbar, back to bottom-2/right-2/z-10
- CodeblockMermaid/Markmap: copy buttons whose left-2/top-2 offsets
  never applied, and which disagreed on z-index — now z-10 on all three

All three codeblocks now position their buttons the same way. Verified
each utility appears in the compiled styles.css rather than trusting
the templates.
CI has been failing on every PR since 444661a (the dependabot bump)
landed on main; main itself hasn't run CI since 2026-05-28, so it went
unnoticed. That bump took typescript from ^6.0.3 to ^7.0.2, and:

- TS7 removed `baseUrl` outright (TS6 only deprecated it, which
  `ignoreDeprecations: "6.0"` was silencing) -> `tsc` hard-errors
  with TS5102.
- TS7 also breaks `svelte-check@4.7.3` — the newest release — which
  crashes reading `typescript.sys` off an undefined default export.
- `@typescript-eslint@8.65.0` declares `typescript: ">=4.8.4 <6.1.0"`,
  so it doesn't claim TS7 support either.

The ecosystem isn't ready for TypeScript 7, so pin back to ^6.0.3.

tsconfig keeps the forward-compatible fix: `baseUrl: "."` becomes
`paths: { "*": ["./*"] }`, which behaves identically under TS6 and is
what TS7 will want. `ignoreDeprecations` is dropped — it existed only
for baseUrl.

Also clears the three lint warnings this stack introduced (52 -> 49):
an `interface` over `type`, and two non-null assertions that don't
narrow anything.
@michaelpporter
michaelpporter merged commit d2cdc46 into main Jul 25, 2026
1 check passed
@michaelpporter
michaelpporter deleted the tailwind-theme-layer branch July 25, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant