fix(styles): import Tailwind's theme layer so spacing utilities work - #740
Merged
Conversation
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
force-pushed
the
734-bug-tree-view-fails-for-links-with-block-references
branch
from
July 25, 2026 15:51
219d60a to
ccb9690
Compare
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
force-pushed
the
tailwind-theme-layer
branch
from
July 25, 2026 15:52
dfb4a6c to
84c3ef8
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the root cause behind #736 and removes the workarounds it had accumulated. No issue number — this was never filed.
The bug
src/styles.cssimported onlytailwindcss/utilities. In Tailwind v4 the numeric--spacingscale 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
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
styles.css(checked programmatically against the built file, not the templates).:root,:hostand*,::before,::after,::backdrop— declare custom properties exclusively, zero visual properties. Nothing leaks into Obsidian's styling.styles.cssgrows 5.4K → 8.1K.w-48/w-60/h-32on settings controls (intended sizing that was missing) andscroll-mt-40, which only affectsscrollIntoViewanchoring — 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/:CodeblockTree.BC-codeblock-tree-{buttons,content}CSS keyed to Obsidian's--size-4-*vars (added in #739)top-2 right-2 z-10/pr-10CodeblockMarkmapstyle="z-index: 1; bottom: 0.5rem; right: 0.5rem"on the zoom toolbarbottom-2 right-2 z-10CodeblockMermaid+CodeblockMarkmapleft-2 top-2never applied — landing top-left by accident — and which disagreed onz-indexleft-2 top-2 z-10, applied for realAll 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 testpass (379 tests, 0 type errors).