I’m encountering an issue with a custom NPM package I’ve created using Vite, React, and library mode. I’ve configured Tailwind CSS in the package and added a few custom CSS classes. While everything works perfectly when I run the project locally, I’m facing a problem once the package is published and used in a new project.

Issue Description
The problem is that the styles defined in the tailwind.css file are correctly applied to the components. However, the Tailwind classes used directly within my SpaceButton.tsx component are not working at all when the component is used in a different project.

Here’s a detailed explanation of my setup and the issue:

SpaceButton.tsx:

import React from "react";
import { cn } from "../utils";

type BackGroundColor = "SpaceBlack" | "SpaceOutline" | "SpaceBlue";

type SpaceButtonProps = {
  buttonText: string;
  className?: string;
  backgroundColor?: BackGroundColor;
};

export const SpaceButton: React.FC<SpaceButtonProps> = ({
  buttonText,
  className,
  backgroundColor,
}) => {
  return (
    <button className={cn(`px-5 py-3 rounded-md ${backgroundColor}`, className)}>
      {buttonText}
    </button>
  );
};

In this file, I use the cn function from utils.ts to merge the Tailwind classes and any additional classes passed through the className prop.

Main.ts:

import "./tailwind.css";
export { SpaceButton } from "./Button/SpaceButton";

utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

This utility function merges class names, which helps in conditionally applying multiple classes.

Package.json:

{
  "name": "spacecodeui01",
  "version": "0.1.1",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/space-ui.umd.cjs",
  "module": "./dist/space-ui.js",
  "exports": {
    ".": {
      "import": "./dist/space-ui.js",
      "require": "./dist/space-ui.umd.cjs"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "sideEffects": false,
  "scripts": {
    "dev": "vite",
    "prebuild": "rm -rf dist",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "prepublish": "npm run build",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "clsx": "^2.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.3.0",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.5.0",
    "@storybook/addon-essentials": "^8.1.10",
    "@storybook/addon-interactions": "^8.1.10",
    "@storybook/addon-links": "^8.1.10",
    "@storybook/addon-onboarding": "^8.1.10",
    "@storybook/blocks": "^8.1.10",
    "@storybook/react": "^8.1.10",
    "@storybook/react-vite": "^8.1.10",
    "@storybook/test": "^8.1.10",
    "@types/node": "^20.14.6",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "eslint-plugin-storybook": "^0.8.0",
    "postcss": "^8.4.38",
    "storybook": "^8.1.10",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.2.2",
    "vite": "^5.1.0",
    "vite-plugin-dts": "^3.9.1"
  }
}

tailwind.config.ts:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // reference the library only
    "./lib/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "paths": {
      "space-ui": ["./lib/main.ts"]
    },
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "lib"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts:

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import dts from "vite-plugin-dts";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), dts({ rollupTypes: true })],
  build: {
    // library entry and output settings
    lib: {
      entry: resolve(__dirname, "lib/main.ts"),
      name: "space-ui",
      fileName: "space-ui",
    },
    // bundler options
    // externalize react-related imports
    rollupOptions: {
      external: ["react", "react-dom", "react/jsx-runtime"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          "react/jsx-runtime": "react/jsx-runtime",
        },
      },
    },
  },
});

When I use the package in a new project, I import the component like this:

import Image from "next/image";
import { SpaceButton } from "spacecodeui01";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <SpaceButton buttonText="toets" backgroundColor="SpaceBlue" />
    </main>
  );
}

Request for Help
I’m not sure what I’m missing or doing wrong. If anyone has encountered a similar issue or has any insights into what might be causing this problem, I would greatly appreciate your help.

You can view the code in the public GitHub repository here: SpaceCode Studios: spaceUI.

Thank you in advance for your assistance!

Best regards,

Jonker Koorts

I verified that the tailwind.css file is correctly imported and the styles from this file are applied.
I ensured that the utility function cn from utils.ts is correctly merging class names.