[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 https://github.com/unovue/shadcn-vue/issues/815#issuecomment-2418021485

[hdwebpros]

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]

@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
pnpm install -D typescript

Fresh Nuxt install with Button component works.

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

[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: 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]

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

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

[buenoleo1982]

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

I'm having the same error on a clean nuxt installation, after following the shadcn-vue installation documentation

Does anyone have any suggestions for solving this?

[buenoleo1982]

In this comment there is a solution that worked for me. Link

[orenmizr]

tailwindcss-animate

this is a dependecy... why do we need to explictly declare it ? that is why the nuxt modules are for (shadcn, tailwind)