CSS variables don't work properly

[Crysta1221]

Hello, there!
I'm trying to create a project with Nuxt3 + Tauri + shadcn/vue.
I followed the documentation at https://www.shadcn-vue.com/docs/installation/nuxt.html , but I cannot apply CSS variables to components.
The folder structure is as shown in the image.

index.vue:

<script setup lang="ts">
import { Button } from "~/components/ui/button";
</script>

<template>
  <Button class="bg-background">Button</Button>
</template>

src/assets/style.scss:

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

body {
  font-family: "Noto Sans JP", sans-serif;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142.1 76.2% 36.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 0 0% 95%;

    --card: 24 9.8% 10%;
    --card-foreground: 0 0% 95%;

    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;

    --primary: 142.1 70.6% 45.3%;
    --primary-foreground: 144.9 80.4% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 12 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 142.4 71.8% 29.2%;
  }
}

components.json:

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/assets/css/style.scss",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "framework": "nuxt",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

nuxt.config.ts:

export default defineNuxtConfig({
  srcDir: "src/",
  serverDir: "server/",
  css: ["~/assets/css/style.scss"],
  tailwindcss: {
    cssPath: "~/assets/css/style.scss",
    configPath: "tailwind.config.ts",
  },
  modules: [
    "@nuxtjs/google-fonts",
    "nuxt-icon",
    "@nuxt/image",
    "@nuxtjs/tailwindcss",
    "dayjs-nuxt",
    "@vueuse/nuxt",
    "@nuxtjs/seo",
    "shadcn-nuxt",
    "@nuxtjs/color-mode",
  ],
  shadcn: {
    prefix: "",
    componentDir: "./src/components/ui",
  },
  colorMode: {
    classSuffix: "",
    preference: "system",
  },
});

Normally, the button would be drawn in green, but with this setting, the button will always be drawn in white.
(Dark mode is applied by color-mode, but the green theme from https://www.shadcn-vue.com/themes.html is used as is. Therefore, dark mode does not turn white. I am thinking.)

I have already verified that the components are installed.
Could you please help me with this matter?
This is long but thank you for reading :)

[sadeghbarati]

Can I access your repo to check this issue only?

---

You are using shadcn-nuxt module, there is no need to import the auto-imported components

@nuxtjs/tailwindcss default path for tailwind main CSS files is assets/css/tailwind.css

If you are defining CSS variables in both assets/css/style.scss and assets/css/tailwind.css, you are doing it wrong,
Only assets/css/tailwind.css should contains CSS variables contents

[Crysta1221]

My repo is here.
https://github.com/Crysta1221/aragoflow-app
I learned for the first time that shadcn/vue had an automatic import function...

[sadeghbarati]

https://stackblitz.com/edit/github-vxl5ew (also I'm using a new shadcn-nuxt module version in this Stackblitz which will be released soon in npm)

Check your tailwind.config.ts you do not define the colors in tailwindcss config file, that is why CSS variables don't affect your button style

[Crysta1221]

I completely forgot about it...
However, in a normal Nuxt project, I think it was automatically changed when I installed the component with npx shadcn-vue add, but why is it not automatically defined?

[Crysta1221]

It seems to have been incorrect generate components.json.
I tried execute npx shadcn-vue@latest init and change tailwind configuration path, tailwind.config.ts to ./tailwind.config.ts.
This went without any problems!

Thanks for pointing out the incorrect tailwind configuration.