css variables not working with tailwind config

[MariuzM]

Environment

---

• Operating System: Darwin
• Node Version: v20.17.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: bun@1.1.29
• Builder: -
• User Config: -
• Runtime Modules: -

• Build Modules: -

Reproduction

nuxt.config.ts

export default defineNuxtConfig({
    compatibilityDate: '2024-09-27',
    devtools: { enabled: false },

    modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],

    css: ['/styles/main.css'],

    tailwindcss: {
        cssPath: '/styles/css/main.css',
        // cssPath: '~/app/styles/css/main.css',
        // cssPath: ['~/assets/main.css', { injectPosition: 'first' }],
        viewer: true,
    },

    experimental: {
        typedPages: true,
    },

    future: {
        compatibilityVersion: 4,
    },
})

app/styles/main.css

:root {
    --primary: #007bff;

    --color-primary: 255 115 179;
}

tailwind.config.ts

import type { Config } from 'tailwindcss'
import colors from 'tailwindcss/colors'

export default <Partial<Config>>{
    theme: {
        colors: {},
        extend: {
            colors: {
                'from-css': 'rgb(var(--primary))',
                'from-css-with-var': 'var(--primary)',

                'from-css2': 'rgb(var(--color-primary))',
                'from-css-with-var-color-primary': 'var(--color-primary)',

                'from-tailwind': colors.amber['300'],
            },
        },
    },
}

I'm not sure what I'm doing wrong?

Describe the bug

css variables are not being picked up by tw config

Additional context

No response

Logs

No response

[MariuzM]

also noticed tailwindcss.cssPath is not even checking is file path is correct or at least its not throwing any errors, but css checks this