[BUG] - Next-UI in-build tailwind css not working in Storybook

[tanuj1811]

NextUI Version

2.2.10

Describe the bug

Project Tech Stack - [React 18, TS, Storybook, tailwindcss, NPM] also edited .npmrc.

Here next-ui in-build tailwind is not importing but i send the tailwind css using className props. It's working.

lib version

    "tailwindcss": "^3.4.1",
"typescript": "^4.6.2",
    "webpack": "^5.70.0",
        "@storybook/builder-webpack5": "^6.4.19",
    "@storybook/manager-webpack5": "^6.4.19",
    "@storybook/node-logger": "^6.4.19",
"@nextui-org/button": "^2.0.27",
    "@nextui-org/react": "^2.2.10",
    "@nextui-org/system": "^2.0.15",
    "@nextui-org/theme": "^2.1.18",
    "@rollup/plugin-sucrase": "^5.0.1",
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "autoprefixer": "^10.4.19",
"framer-motion": "^11.0.20",
    "react": "^18.2.0",

tailwind.config.js

const { nextui } = require("@nextui-org/theme");

const config = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  content: [
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      spacing: {
        128: "32rem",
      },
    },
  },
  variants: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

export default config;

preview.js

import { NextUIProvider } from '@nextui-org/react';
import "../src/styles/tailwind.css";

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

export const decorators = [
  (Story) => (
    <NextUIProvider>
      <Story />
    </NextUIProvider>
  ),
];

No changes in main.js

Button.stories.tsx

import React from "react";
import { Meta, Story } from "@storybook/react";
import { button } from "@nextui-org/theme";
import { Camera, HeadphonesIcon, Notification } from "@nextui-org/shared-icons";
import { Button, ButtonProps } from "@nextui-org/button";

export default {
  title: "NextUI/Button",
  component: Button,
  argTypes: {
    variant: {
      control: {
        type: "select",
      },
      options: [
        "solid",
        "bordered",
        "light",
        "flat",
        "faded",
        "shadow",
        "ghost",
      ],
    },
    color: {
      control: {
        type: "select",
      },
      options: [
        "default",
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
      ],
    },
    size: {
      control: {
        type: "select",
      },
      options: ["sm", "md", "lg"],
    },
    spinnerPlacement: {
      control: {
        type: "select",
      },
      options: ["start", "end"],
    },
    fullWidth: {
      control: {
        type: "boolean",
      },
    },
    radius: {
      control: {
        type: "select",
      },
      options: ["none", "sm", "md", "lg", "full"],
    },
    isDisabled: {
      control: {
        type: "boolean",
      },
    },
    isLoading: {
      control: {
        type: "boolean",
      },
    },
    disableAnimation: {
      control: {
        type: "boolean",
      },
    },
  },
} as Meta<typeof Button>;

const defaultProps = {
  children: "Button",
  spinnerPlacement: "start",
  ...button.defaultVariants,
};

const Template: Story<ButtonProps> = (args) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handlePress = () => {
    // eslint-disable-next-line no-console
    console.log("Pressed");
    setIsOpen((prev) => !prev);
  };

  return (
    <Button
      {...args}
      aria-label="Open"
      aria-pressed={isOpen}
      onPress={handlePress}
    >
      {isOpen ? "Close" : "Open"}
    </Button>
  );
};

export const Default = {
  args: {
    ...defaultProps,
  },
};

export const WithState = {
  render: Template,

  args: {
    ...defaultProps,
  },
};

export const IsDisabled = {
  args: {
    ...defaultProps,
    isDisabled: true,
  },
};

export const DisableRipple = {
  args: {
    ...defaultProps,
    disableRipple: true,
  },
};

export const WithIcons = {
  args: {
    ...defaultProps,
    startContent: <Notification className="fill-current" />,
    endContent: <Camera className="fill-current" />,
  },
};

export const IconButton = {
  args: {
    ...defaultProps,
    isIconOnly: true,
    children: <HeadphonesIcon className="w-5 h-5" />,
  },
};

export const IsLoading = {
  args: {
    ...defaultProps,
    color: "primary",
    isLoading: true,
  },
};

export const CustomWithClassNames = {
  args: {
    ...defaultProps,
    radius: "full",
    className:
      "bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg",
  },
};

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

FYI - ripple effect is working onClick

Expected behavior

Screenshots or Videos

Operating System Version

fedora 38

Browser

Chrome

[linear[bot]]

ENG-552 [BUG] - Next-UI in-build tailwind css not wrok