SolidJS•2w ago

shadcn-solid plain install ? (maybe a tailwind issue?)

Hey there, is anyone using https://shadcn-solid.com/ ? I created a clean project, followed their installation by the book ( https://shadcn-solid.com/docs/installation/solid-start ) and still getting

6:50:44 PM [vite] Error when evaluating SSR module /src/entry-server.tsx:
|- Error: [postcss] Cannot apply unknown utility class: border-border

6:50:44 PM [vite] Error when evaluating SSR module /src/entry-server.tsx:
|- Error: [postcss] Cannot apply unknown utility class: border-border

I just chose the tailwindcss template from the npx create solid dropdown, but it seems something isn't working?

SolidStart

Install and configure SolidStart.

8 Replies

BersaelorOP•2w ago

I just wanted to give it a try in a small test project, but if I can't even get the documented installation to work...

Madaxen86•2w ago

Use https://solid-ui.com instead. It’s also a port of shadcn and it works fine, is well maintained and has more components

solid-ui

Beautifully designed components built with Kobalte and Tailwind CSS.

BersaelorOP•2w ago

thank you, oh the sites look so similar but you are right, that github project seems much more alive dangit, the same error ( with solid-ui.com )

9:03:35 PM [vite] Pre-transform error: [postcss] Cannot apply unknown utility class: border-border
9:03:35 PM [vite] Error when evaluating SSR module /src/app.tsx:
|- Error: [postcss] Cannot apply unknown utility class: border-border
    at onInvalidCandidate (/.../cms/node_modules/tailwindcss/dist/lib.js:17:297)

9:03:35 PM [vite] Pre-transform error: [postcss] Cannot apply unknown utility class: border-border
9:03:35 PM [vite] Error when evaluating SSR module /src/app.tsx:
|- Error: [postcss] Cannot apply unknown utility class: border-border
    at onInvalidCandidate (/.../cms/node_modules/tailwindcss/dist/lib.js:17:297)

could this be a typescript issue? Since the default generated tailwind file is tailwind.config.cjs and not a *.ts?

BersaelorOP•2w ago

the creator of shadcn-solid just responded, it's because the default solid-tailwind project uses Tailwind v4: https://github.com/hngngn/shadcn-solid/issues/140#issuecomment-2648894102

GitHub

[bug]: Problems getting a sample app to work · Issue #140 · hngngn/...

Describe the bug It seems following https://shadcn-solid.com/docs/installation/solid-start doesn't lead to a working application Affected component/components anything How to reproduce % yarn c...

BersaelorOP•2w ago

then no shadcn for me right now I guess, I'd rather keep the default solid-js template

Madaxen86•2w ago

I think Tailwind 4.0 requires Vite 6 which is now supported by the latest solid-start version 1.1.0 (vinxi 0.5.6) Upgrading might fix it or fix the tailwind version to 3.x

BersaelorOP•2w ago

the default tailwindcss solid-start template comes with Tailwind 4.0 and works fine, It's just shadcn that doesn't work with tailwind 4 yet. The default template has:

  "overrides": {
    "vite": "5.4.10"
  },

  "overrides": {
    "vite": "5.4.10"
  },

which works fine

Madaxen86•2w ago

you have to make some adjsutments after solid-ui is installed. change the app.css to start with

@import "tailwindcss";
@config "../tailwind.config.cjs";

note that you need to remove

@tailwind base;
@tailwind components;
@tailwind utilities;

with solid-start 1.1.0 and vinxi 0.5.3 and removing the overrides so package.json is like

{
  "name": "example-with-tailwindcss",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "dependencies": {
    "@fontsource/inter": "^5.1.1",
    "@kobalte/core": "^0.13.8",
    "@solidjs/router": "^0.15.0",
    "@solidjs/start": "^1.1.0",
    "@tailwindcss/vite": "^4.0.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "embla-carousel-solid": "^8.5.2",
    "solid-js": "^1.9.2",
    "tailwind-merge": "^3.0.1",
    "tailwindcss-animate": "^1.0.7",
    "vinxi": "^0.5.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.0.5",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.5"
  },
  "engines": {
    "node": ">=22"
  }
}

You may have to adjust some classes in some cases as tw4 had some breaking changes.

Gaming

Programming

shadcn-solid plain install ? (maybe a tailwind issue?)

Did you find this page helpful?