fix(examples/with-unocss): prevent hydration mismatch by using vite-p…

[KunMoe]

PR Checklist

Please check if your PR fulfills the following requirements:

• Addresses an existing open issue: fixes [Bug?]: [examples/with-unocss] Hydration mismatch caused by Tailwind reset import during SSR #1980
• Tests for the changes have been added (for bug fixes / features)
• Example runs without errors or hydration mismatches
• Code follows the project’s style and contribution guidelines

What is the current behavior?

The with-unocss example imports @unocss/reset/tailwind.css directly in app.tsx.
Since SolidStart is SSR-first, this causes hydration mismatches and a visible layout/style shift on load.

What is the new behavior?

Configure UnoCSS via vite-plugin-solid with SSR enabled

• Enable presetWind4 extension for Tailwind-compatible utilities
• Removed manual reset import from app.tsx
• This ensures the generated CSS is consistent between server and client, avoiding hydration mismatches and style shifts.

Main changes

Updated app.config.ts:

import { defineConfig } from "@solidjs/start/config";
import solidPlugin from 'vite-plugin-solid';
import UnoCSS from 'unocss/vite';
import presetWind4 from '@unocss/preset-wind4';

export default defineConfig({
  vite: {
    plugins: [
      UnoCSS({
        presets: [presetWind4()]
      }),
      solidPlugin({
        ssr: true,
      })
    ]
  }
});

Removed import "@unocss/reset/tailwind.css"; from app.tsx
Verified hydration consistency, no style jumps

Other information

• Tested locally using pnpm dev in examples/with-unocss
• No hydration problems
• No visible layout shift
• Aligns the UnoCSS integration with UnoCSS Vite SSR best practices

[changeset-bot]

⚠️ No Changeset found

Latest commit: fcad0a0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for solid-start-landing-page ready!

Name	Link
🔨 Latest commit	fcad0a0
🔍 Latest deploy log	https://app.netlify.com/projects/solid-start-landing-page/deploys/68d452411001bc00081be2a7
😎 Deploy Preview	https://deploy-preview-1981--solid-start-landing-page.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

More templates

• example-bare
• example-basic
• example-experiments
• example-hackernews
• example-notes
• example-todomvc
• example-with-auth
• example-with-authjs
• example-with-drizzle
• example-with-mdx
• example-with-prisma
• example-with-solid-styled
• example-with-solidbase
• example-with-tailwindcss
• with-tanstack-router
• example-with-trpc
• example-with-unocss
• example-with-vitest

npm i https://pkg.pr.new/@solidjs/start@1981

commit: b8c1996