[Bug]: Fresh install, new project: The `border-border` class does not exist.

hdwebpros commented 1 week ago

Reproduction

https://www.shadcn-vue.com/docs/installation/nuxt

Describe the bug

On a Nuxt project, fresh install via: https://www.shadcn-vue.com/docs/installation/nuxt I run npx shadcn-vue@latest init to init After I do just the default values, I run npm run dev or deno run dev. Either way I get:

The border-border class does not exist. If border-border is a custom class, make sure it is defined within a @layer directive.

I looked at similar issues, but this doesn't have any tailwind files at all before init, and after init all I have it tailwind.config.js

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 9 4900HS with Radeon Graphics
    Memory: 14.28 GB / 19.25 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 8.7.4 - ~/.local/share/pnpm/pnpm
  npmPackages:
    nuxt: ^3.13.0 => 3.13.2
    shadcn-nuxt: ^0.10.4 => 0.10.4
    vue: latest => 3.5.11

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

rromanv commented 1 week ago

Related to the one I opened on #815

kentntwari commented 1 week ago

same. Followed the install instruction, watched tutorials and still ended up with this error. It's as if shadcn-vue and tailwind.config.js are not communicating

k206i commented 1 week ago

I was helped by installing tailwindcss-animate

rromanv commented 1 week ago

Here is a temporal workaround https://github.com/unovue/shadcn-vue/issues/815#issuecomment-2418021485

hdwebpros commented 1 week ago

That comment https://github.com/unovue/shadcn-vue/issues/815#issuecomment-2418021485 didn't help. I did manually install Typescript npm install -D typescript like it said later in that thread but now a new issue has popped up -- unknown word on "use strict";.

I can keep trying to manually installing missing dependencies as others suggest, but that sort of defeats the whole point of the fact that this is an issue on ShadCDN-Vue new installs, in particular with me the Nuxt variation.

rromanv commented 1 week ago

@hdwebpros , can you try a new project and install v 0.10.4 instead of latest it should work, it worked for me, if you continue doing latest, then all deps need to be installed manually and some files changed too.

The way I see the problem is that shadcn-vue is already at v0.11.0 but somehow shandcn-nuxt stayed at 0.10.4 (even when on github is already 0.11.0), the cli and nuxt module don't match and is not doing all the steps that it supposed to do.

Gornius commented 1 week ago

Installing these deps helped me:

pnpm install radix-vue tailwind-merge tailwindcss-animate class-variance-authority
pnpm install -D typescript

Fresh Nuxt install with Button component works.

--- Edit: added typescript dev dependency, thanks to @bartomiak

hdwebpros commented 5 days ago

@Gornius with this as my dependencies in package.json

  "dependencies": {
    "class-variance-authority": "^0.7.0",
    "lucide-vue-next": "^0.453.0",
    "nuxt": "^3.13.0",
    "radix-vue": "^1.9.7",
    "shadcn-nuxt": "^0.10.4",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.12.1"
  }

if I run the dev script, technically the front end shows the <NuxtWelcome /> component, the UI seems fine. The compiler shows

    ERROR  [unhandledRejection] require is not defined  
  at tailwind.config.js:1:17

That line is: const animate = require("tailwindcss-animate") . I found a comment somewhere that says perhaps using import is better: https://github.com/tailwindlabs/tailwindcss-forms/issues/151#issuecomment-1804554914

And also, for anyone following, a minor detail but make sure you add the blank folders that this needs to eliminate compiler errors and warnings, such as /components/ui.

bartomiak commented 2 days ago

Installing these deps helped me: pnpm install radix-vue tailwind-merge tailwindcss-animate class-variance-authority

Fresh Nuxt install with Button component works.

After installing those packages i saw this error:

5  |  import { type ButtonVariants, buttonVariants } from '.'
6  |
7  |  interface Props extends PrimitiveProps {
   |                          ^^^^^^^^^^^^^^
8  |    variant?: ButtonVariants['variant']
9  |    size?: ButtonVariants['size']

than you have to install npm install -D typescript and it should work

unovue / shadcn-vue