having trouble with tailwind / addon-styling

[jovial condor]

I am trying to run the script pnpm addon-styling-setup and get this error. Wondering if i setup something wrong

import { join, dirname } from 'path'

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value) {
    return dirname(require.resolve(join(value, 'package.json')))
}

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
        getAbsolutePath('@storybook/addon-links'),
        getAbsolutePath('@storybook/addon-essentials'),
        getAbsolutePath('@storybook/addon-onboarding'),
        getAbsolutePath('@storybook/addon-interactions'),
        getAbsolutePath('@storybook/addon-styling'),
    ],
    framework: {
        name: getAbsolutePath('@storybook/react-vite'),
        options: {},
    },
    docs: {
        autodocs: 'tag',
    },
}
export default config

preview.js

import 'tailwindcss/tailwind.css'
// TODO: try importing styles/globals.css
/** @type { import('@storybook/react').Preview } */
const preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
}

export default preview

i changed the files from .js to .ts and adjusted the main.ts a little bit and it seems like the codemod worked. but now with i start story book i have these erros.

This is a pnpm monorepo where main is in a packages/ui/.storybook/main.ts route

import type { Preview } from '@storybook/react'
import { withThemeByClassName } from '@storybook/addon-styling'

/* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
import '../src/index.css'
const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },

    decorators: [
        // Adds theme switching support.
        // NOTE: requires setting "darkMode" to "class" in your tailwind config
        withThemeByClassName({
            themes: {
                light: 'light',
                dark: 'dark',
            },
            defaultTheme: 'light',
        }),
    ],
}

export default preview

main

import type { StorybookConfig } from '@storybook/react-vite'

// import { join, dirname } from 'path'

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
// function getAbsolutePath(value) {
//     return dirname(require.resolve(join(value, 'package.json')))
// }

const config: StorybookConfig = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-onboarding',
        '@storybook/addon-interactions',
        {
            name: '@storybook/addon-styling',
            options: {},
        },
    ],
    framework: '@storybook/react-vite',
    docs: {
        autodocs: 'tag',
    },
}
export default config

[jovial condor]

ah! fixed it ... needed to change import '../src/index.css' to the right css file.