How to bundle tailwind css styles into rollup

Question

I am using tailwind css along with clsx , class variance authority and tailwind-merge to create a button component. I am using storybook to test these components and the style works in storybook. When I download my package and test I can see the right class styles in "inspect" in chrome dev tools but no styling on my button.

I can pass props into my button and vs code can see my types but still no style is added, I can only see the style in storybook.

rollup.config.js

import babel from 'rollup-plugin-babel';
import external from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import commonjs from '@rollup/plugin-commonjs';

import packageJson from './package.json' assert { type: 'json' };

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      external(),
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      }),
      babel({
        exclude: 'node_modules/**',
        presets: ['@babel/preset-react'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      }),
      resolve({
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      }),
      typescript({ tsconfig: './tsconfig.json' }), 
      commonjs(),
      terser(), 
    ],
  },
  {
    input: 'src/index.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()],
    external: [/\.(css)$/],
  },
];

postcss.config.js

module.exports = {
  map: true,
  plugins: [
    require('postcss-easy-import'),
    require('postcss-nesting'),
    require('postcss-custom-properties'),
    require('postcss-color-function'),
    require('autoprefixer'),
    require('tailwindcss')
  ]
}

package.json

{
  "name": "sweet-buttons",
  "version": "1.0.2",
  "description": "A simple button library for React",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "type": "module",
  "author": "Ryan Cuff",
  "license": "MIT",
  "private": false,
  "dependencies": {
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "rollup-plugin-babel": "^4.4.0",
    "tailwind-merge": "^2.2.2",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "@chromatic-com/storybook": "1.2.25",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-terser": "^0.4.4",
    "@rollup/plugin-typescript": "^11.1.6",
    "@storybook/addon-essentials": "^8.0.4",
    "@storybook/addon-interactions": "^8.0.4",
    "@storybook/addon-links": "^8.0.4",
    "@storybook/addon-onboarding": "^8.0.4",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addon-webpack5-compiler-swc": "1.0.2",
    "@storybook/blocks": "^8.0.4",
    "@storybook/react": "^8.0.4",
    "@storybook/react-webpack5": "^8.0.4",
    "@storybook/test": "^8.0.4",
    "@types/react": "^18.2.71",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "postcss": "^8.4.38",
    "postcss-color-function": "^4.1.0",
    "postcss-custom-properties": "^13.3.6",
    "postcss-easy-import": "^4.0.0",
    "postcss-loader": "^8.1.1",
    "postcss-nesting": "^12.1.0",
    "rollup": "^4.13.0",
    "rollup-plugin-dts": "^6.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "storybook": "^8.0.4",
    "tslib": "^2.6.2",
    "typescript": "^5.4.3"
  },
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "rollup": "rollup -c"
  }
}