I created a library using react vite with reusable components built on top of tailwind css. I use different variants of props for styling them with the help of class-variance-authority. Once I build the library and try to import it, I can only access the props defined as “static” (not the ones defined in the variants file).

The props defined here work:

interface ButtonProps
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">,
    VariantProps<typeof buttonStyles> {
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  bg?: 'bg-black' | 'bg-red-600';
}

But the ones inside the buttonStyles doesn’t work even though intellisense for the props gets displayed correctly.

The config I’m using in vite.config.js:

export default defineConfig({
    build: {
        lib: {
            entry: resolve(__dirname, "./lib/index.ts"),
            name: "react-beautiful-timeline",
            fileName: function (format) { return "index.".concat(format, ".js"); },
        },
        rollupOptions: {
            external: ["react", "react-dom", "tailwindcss", "class-variance-authority"],
            output: {
                globals: {
                    react: "React",
                    "react-dom": "ReactDOM",
                    tailwindcss: "tailwindcss",
                    "class-variance-authority": "class-variance-authority",
                },
            },
        },
        sourcemap: true,
        emptyOutDir: true,
    },
    plugins: [react(), dts({ rollupTypes: true })],
    css: {
        postcss: {
            plugins: [tailwindcss],
        },
    },
});