Storybook 7: Render different props value for only once component not working

Question

I'm doing my personal project using Next 13, Storybook 7, TypeScript and TailwindCSS.

I want to display different color for Button component in Storybook in one canvas but seemly it not apply className props for component.

enter image description here

This is Button Story:

import { componentSizes } from '@/app/settings/size';
import Button from './Button';
import { Meta, StoryObj } from '@storybook/react';
import { ncColors } from '@/app/settings/color';

export default {
  title: 'Example/Button',
  component: Button,
  args: {
    className: "my-2"
  }
} as Meta<typeof Button>;

export const PinkButton: StoryObj<typeof Button> = {
  args: {
    className: 'bg-pink-main',
    children: 'test',
  },
};

export const GreenButton: StoryObj<typeof Button> = {
  args: {
    className: 'bg-green-main',
    children: 'test',
  },
};

export const Size: StoryObj<typeof Button> = {
  render(args) {
    return (
      <>
        {componentSizes.map((x) => (
          <Button {...args} state="error" size={x} key={x} className="my-2">
            {x}
          </Button>
        ))}
      </>
    );
  },
};

export const Color: StoryObj<typeof Button> = {
  render(args) {
    return (
      <>
        {Object.keys(ncColors).map((color) => (
          <Button {...args} className={`bg-${color} my-2`} key={color}>
            {color}
          </Button>
        ))}
      </>
    );
  },
};

This is main.ts file:

import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';
import { Configuration } from 'webpack';

const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false,
      },
    },
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
    },
  },
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: (config: Configuration) => {
    const { module, resolve } = config ?? {};
    if (module?.rules && resolve?.alias) {
      resolve.alias = {
        ...resolve.alias,
        '@': [
          path.resolve(__dirname, '../app/'),
          path.resolve(__dirname, '../'),
        ],
      };
      resolve.roots = [path.resolve(__dirname, '../public'), 'node_modules'];
    }
    config.module?.rules?.push({
      sideEffects: true
    });
    return config;
  },
};
export default config;

This is preview.ts file:

import type { Preview } from '@storybook/react';
import './tailwind.css';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

When I run npm run storybook, the terminal shows this result:

enter image description here

I have googled and stackoverflow but haven't found a solution yet.

Any help is appreciated. Thanks everyone.