feat(web): compile Tailwind v4 and consume the UI theme#46
Open
ByteMeBaby wants to merge 1 commit into
Open
Conversation
Wire @tailwindcss/vite into the web app so @forgekit/ui components render styled. The app stylesheet imports tailwindcss then @forgekit/ui/theme.css and uses @source to scan the compiled UI package, so Tailwind generates the utilities used inside components. - styles.css is applied through a side-effect import in __root.tsx; TanStack Start injects it for server rendering and hydration. - The home page renders a UI Button as the styling smoke. - The dev task depends on ^build so a fresh clone builds UI before the watchers start, and the UI package gains a tsc --watch dev script to keep its dist current. - vite/client ambient types replace a hand-rolled css module shim.
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
1 participant
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.
Chunk 2a of the 0.4 app shell (web half): wire Tailwind v4 into the web app so the merged
@forgekit/uicomponents render styled. Styling substrate only; the typedapi()client and the/healthprobe are the next chunk (2b).What this adds
@tailwindcss/vitein the Vite plugin chain ([tanstackStart(), tailwindcss(), viteReact()]).apps/web/src/styles.css:@import "tailwindcss"then@import "@forgekit/ui/theme.css", with@source "../node_modules/@forgekit/ui/dist"so Tailwind generates the utilities used inside the compiled ui components (it does not scannode_modulesby default).__root.tsx; TanStack Start injects it for SSR and hydration.@forgekit/uiButtonas the styling smoke.devnowdependsOn: ["^build"]so a fresh clone builds the ui package before the watchers start (closes avite dev/@sourcerace where the uidistwould be absent), and the ui package gains atsc --watchdevscript to keep itsdistcurrent.vite/clientambient types replace a hand-rolleddeclare module "*.css"shim (also givesimport.meta.envtyping the next chunk needs).Verification
TURBO_FORCE=true(28/28)..bg-popoverand.text-muted-foreground- classes used only inside ui components, not the app - which proves@sourcescanned the compiled package.background: oklch(0.205 0 0)=--primary,color: oklch(0.985 0 0)=--primary-foreground, radius from the token scale), and the body inherits--foreground.Docs
docs/web/app-skeleton.mdgains a Styling section (the plugin, the stylesheet, the@sourcerule, the.darkcontract, and the dev-build ordering);docs/ui/component-library.md@sourceexample is aligned to the path used here.Next (2b)
Shared request/response types in
core, the hand-written typedapi()client, and the/healthup/down connectivity probe.