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

[hdwebpros]

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]

Related to the one I opened on #815

[kentntwari]

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]

I was helped by installing tailwindcss-animate

[rromanv]

Here is a temporal workaround #815 (comment)

[hdwebpros]

That comment #815 (comment) 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]

@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]

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

Fresh Nuxt install with Button component works.

[hdwebpros]

@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: tailwindlabs/tailwindcss-forms#151 (comment)

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.