当其他人导入 React 组件时，Tailwind CSS 不会对它们进行样式化。为什么？

Question

我使用react + vite + tailwind创建了一个react组件库。在里面我创建了

components > Buttons > all the types of btn(jsx files)

。 使用 index.js 我正在导出它们。

这是我的

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'
        }
      }
    }
  }
})

然后发布了这个库，名称为kiton。我在另一个项目中使用了它，我刚刚安装了它并导入了组件：

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;

现在的问题是，当我在项目中使用自己的库的组件时，tailwind css 正在应用到我在库中使用的它们，但在渲染时它的行为如此出人意料。

检查之前 App.jsx 文件的工具元素部分

正如您所看到的，所有顺风实用程序类都在那里，但没有应用。主要问题是当我在同一文件中的其他地方使用这些顺风CSS类时，我的库组件的类正在渲染。

这可能会令人困惑，我举一个小例子：

1. 在之前的 App.jsx 文件中，我没有给出额外的 css 类，因此结果如下： App.jsx 文件的渲染输出

   正如您在图像中看到的那样，其中任何一个都没有颜色，但是有填充， 我没有给它，因为它来自我的图书馆。

2. 现在我给

   span

   标签赋予背景颜色，其余的都是一样的：

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;

然后结果：给span标签提供背景颜色后

总结：顺风CSS仅在我在其他地方使用它之后才应用，即使在重新启动服务器后它消失了。我希望有人得到这个，这是我第一次创建库，我得到了这个🥲。

Answer 1

似乎库的文件没有被

content

文件全局覆盖。您需要确保它们被覆盖，例如：

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

这是必需的，因为 Tailwind 不“了解”文件

import

其他文件。它将文件扫描为纯文本文件（就像它们具有

.txt

扩展名或等效扩展名一样），并且不了解任何有关依赖项的信息。