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). Using index.js I am exporting them.

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 published this library with the name kiton. I used this in my 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. And the major issue is When i use those tailwind css classes somewhere else in same file, then the classes of my library component is getting render.

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: Rendered output of App.jsx file

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

2. Now I'm giving bg color to span tag, rest of them are 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;

Then result: After giving bg color to span tag

Summary: The tailwind css is applying only after when I use it somewhere else, even though after restarting server it gone vanish. I hope someone got this, it's my first time creating 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.