Tailwind CSS isn’t styling my React components when others import them. Why?

I've created a react component library using react + vite + tailwind.

Inside, I have created components > Buttons > all the types of btn(JSX files).

I am exporting them using index.js.

This is my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: './src/index.js', // Entry file
      name: 'kiton',
      formats: ['esm', 'cjs'], // Output both ESM and CommonJS formats
      fileName: (format) => `index.${format}.js` // Generate index.esm.js and index.cjs.js
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // Mark peer dependencies as external
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

Then, I published this library with the name kiton. I used this in another project where I just installed this and imported components:

import {
  Button,
  ButtonLoading,
  ButtonOutline,
  ButtonPrimary,
  ButtonSecondary,
} from "kiton";

function App() {
  return (
    <div>
      <span className="">Kiton's workspace !</span>
      <div className="flex flex-col gap-5 w-fit m-8">
        <Button />
        <ButtonPrimary text="Primary" />
        <ButtonSecondary text="Secondary" />
        <ButtonOutline text="Outline" />
        <ButtonLoading text="Loading..." isLoading={true} />
      </div>
    </div>
  );
}

export default App;

Now the problem is when I use my own library's component in my project, the Tailwind CSS is applying to them that I've used in my library, but at the time of rendering it behaves so unexpectedly.

Inspect tool's element section of previous App.jsx file:

As you can see, all the Tailwind utility classes are there but aren't applying. The major issue is that ** When I use those Tailwind CSS classes somewhere else in the same file, then the classes of my library component are getting rendered**.

It might be confusing I'll give one small example:

1. In the previous App.jsx file I haven't given extra CSS classes so below is the result:

As you can see in the image there is no color in any of them but padding is there, which I haven't given because it's from my library.

2. Now I'm giving bg color to span tag, the rest of them are the same:

import {
  Button,
  ButtonLoading,
  ButtonOutline,
  ButtonPrimary,
  ButtonSecondary,
} from "kiton";

function App() {
  return (
    <div>
      <span className="bg-cyan-300">Kiton's workspace !</span>
      <div className="flex flex-col gap-5 w-fit m-8">
        <Button />
        <ButtonPrimary text="Primary" />
        <ButtonSecondary text="Secondary" />
        <ButtonOutline text="Outline" />
        <ButtonLoading text="Loading..." isLoading={true} />
      </div>
    </div>
  );
}

export default App;

The result:

Summary: The Tailwind CSS applies only when I use it somewhere else, even though it disappears after restarting the server. I hope someone understands this. It's my first time creating a library, and I'm getting this.

It seems like the library's files is not covered by the content file globs. You'd want to ensure they are covered, like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    'node_modules/kiton/path/to/the/files.js'
    …

This is needed since Tailwind does not "know" about files importing other files. It scans files as plain text files (like if they had the .txt extension or equivalent) and does not know anything about dependencies.