Skip to content

feat(ui): migrate from Tailwind CSS to UnoCSS + Melt UI next-gen#88

Merged
Soushi888 merged 2 commits into
devfrom
feat/83-ui-styling-unocss-melt
Apr 15, 2026
Merged

feat(ui): migrate from Tailwind CSS to UnoCSS + Melt UI next-gen#88
Soushi888 merged 2 commits into
devfrom
feat/83-ui-styling-unocss-melt

Conversation

@Soushi888

Copy link
Copy Markdown
Collaborator

Intent

Migrate the UI styling stack from Tailwind CSS v4 to UnoCSS + Melt UI next-gen, as decided in #83. This removes the Tailwind dependency chain and establishes UnoCSS as the atomic CSS engine with a direct Vite-native integration path.

Changes

  • Remove tailwindcss, @tailwindcss/vite, @tailwindcss/forms, @tailwindcss/typography, prettier-plugin-tailwindcss
  • Delete ui/tailwind.config.js
  • Add unocss@66.6.8, @unocss/preset-icons, @unocss/extractor-svelte, @unocss/reset (devDeps); melt@0.44.0 (dep)
  • New ui/uno.config.tspresetUno() (Tailwind-compatible) + presetIcons() (Iconify CSS classes)
  • Update ui/vite.config.tsUnoCSS({ extractors: [extractorSvelte()] }) before sveltekit()
  • Update ui/src/app.css@import '@unocss/reset/tailwind.css'
  • Update ui/src/routes/+layout.svelteimport 'virtual:uno.css'
  • Update ui/.prettierrc — remove prettier-plugin-tailwindcss and tailwindStylesheet

Decisions

  • UnoCSS presetUno() provides Tailwind-compatible utility names — all existing classes in HolochainProvider.svelte and +page.svelte work without modification
  • UnoCSS must be positioned before sveltekit() in Vite plugins array (Vite plugin order requirement)
  • melt@0.44.0 is pre-1.0 — breaking changes in minor releases until v1.0 are accepted per issue decision
  • Icon library migration (emoji → preset-icons Iconify classes) is out of scope for this PR

How to Test

cd ui
bun install
bun run dev   # dev server should start, styles should render correctly
bun run build # vite build should pass (note: pre-existing TS errors in resource.service.ts are unrelated)

Visual check: HolochainProvider.svelte connecting state and +page.svelte layout should render with styles applied.

Related

Closes #83

Resolves #83.

- Remove tailwindcss, @tailwindcss/vite, @tailwindcss/forms,
  @tailwindcss/typography, prettier-plugin-tailwindcss
- Install unocss@66.6.8, @unocss/preset-icons, @unocss/extractor-svelte,
  @unocss/reset as devDependencies; melt@0.44.0 as dependency
- Delete ui/tailwind.config.js
- vite.config.ts: swap tailwindcss() plugin for UnoCSS({ extractors })
  with UnoCSS positioned before sveltekit() per Vite plugin order
- New ui/uno.config.ts with presetUno() (Tailwind-compatible utilities)
  and presetIcons() (Iconify icon-as-CSS-class support)
- ui/src/app.css: replace @import 'tailwindcss' with
  @import '@unocss/reset/tailwind.css'
- ui/src/routes/+layout.svelte: add import 'virtual:uno.css'
- ui/.prettierrc: remove prettier-plugin-tailwindcss and tailwindStylesheet

All existing Tailwind utility classes in HolochainProvider.svelte and
+page.svelte remain valid unchanged under presetUno().
@Soushi888 Soushi888 marked this pull request as ready for review April 15, 2026 01:10

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.

Open in Devin Review

@Soushi888 Soushi888 merged commit a67e3ef into dev Apr 15, 2026
2 checks passed
@Soushi888 Soushi888 deleted the feat/83-ui-styling-unocss-melt branch April 17, 2026 08:07
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.

[Setup] UI Styling Stack: Migrate from Tailwind CSS to UnoCSS + Melt UI (next-gen)

1 participant