[Bug?]: Solid-start with tailwind template does not work. #1875
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
I started a new solid-start project with
npm init solid@latest
Select with tailwindcss, solid start project, with typescript.
Then run npm install and npm run dev
Does not work. You get errors because tailwind css changed to V4
I followed their documentation here: https://tailwindcss.com/docs/installation/using-vite
I installed npm install tailwindcss @tailwindcss/vite
Modified the app.comfig.js to
import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
});
app.css is
@import "tailwindcss";
:root {
--background-rgb: 214, 219, 220;
--foreground-rgb: 0, 0, 0;
}
@media (prefers-color-scheme: dark) {
:root {
--background-rgb: 0, 0, 0;
--foreground-rgb: 255, 255, 255;
}
}
body {
background: rgb(var(--background-rgb));
color: rgb(var(--foreground-rgb));
}
package.json looks like
{
"name": "example-with-tailwindcss",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start"
},
"dependencies": {
"@tailwindcss/vite": "^4.0.7",
"@solidjs/router": "^0.15.0",
"@solidjs/start": "^1.1.0",
"solid-js": "^1.9.5",
"vinxi": "^0.5.3"
},
"devDependencies": {
"tailwindcss": "^4.0.7"
},
"engines": {
"node": ">=22"
}
}
I had to make sure that "@tailwindcss/vite": "^4.0.7", is NOT in the dependency section, otherwise I get a module not found error when running npm run dev.
With the current settings, the server starts, but when I go to http://localhost:3000/ in the browser window I get
TypeError: Cannot read properties of undefined (reading 'client')
at Object.get (/Users/nnemes/Workspace/owner-portal/node_modules/vinxi/lib/manifest/prod-server-manifest.js:45:53)
at createPageEvent (/Users/nnemes/Workspace/owner-portal/node_modules/@solidjs/start/dist/server/pageEvent.js:29:45)
at eval (/Users/nnemes/Workspace/owner-portal/node_modules/@solidjs/start/dist/server/handler.js:40:31)
at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
at provideRequestEvent (file:///Users/nnemes/Workspace/owner-portal/node_modules/solid-js/web/storage/dist/storage.js:7:14)
at handler (/Users/nnemes/Workspace/owner-portal/node_modules/@solidjs/start/dist/server/handler.js:22:59)
at _callHandler (file:///Users/nnemes/Workspace/owner-portal/node_modules/h3/dist/index.mjs:1837:22)
at _handler (file:///Users/nnemes/Workspace/owner-portal/node_modules/h3/dist/index.mjs:1818:12)
at handler (file:///Users/nnemes/Workspace/owner-portal/node_modules/vinxi/lib/router-modes.js:278:14)
at async _callHandler (file:///Users/nnemes/Workspace/owner-portal/node_modules/h3/dist/index.mjs:1837:16)
at async file:///Users/nnemes/Workspace/owner-portal/node_modules/h3/dist/index.mjs:1978:19
at async Object.callAsync (file:///Users/nnemes/Workspace/owner-portal/node_modules/unctx/dist/index.mjs:72:16)
at async Server.toNodeHandle (file:///Users/nnemes/Workspace/owner-portal/node_modules/h3/dist/index.mjs:2270:7)
No errors in the terminal.
What gives?
Expected behavior 🤔
No response
Steps to reproduce 🕹
Steps:
Context 🔦
No response
Your environment 🌎
npm -v 10.9.2
node -v v22.14.0
MacOs Sequoia 15.3.2