如何将 React 组件库中的 Tailwind CSS 样式包含到应用程序 CSS 包中？

Question

你好，

我正在使用 TailwindCSS 和 ViteJS 构建 React 组件库。该库将每个组件输出为单独的 JS 文件，例如：

// @components-library/src/ComponentA.jsx

export default function ComponentA() {
  return <div className="flex justify-center">Component A</div>;
}

// Bundle Output: @components-library/dist/ComponentA.js

import { j as jsx } from "./jsx-runtime.js";
import "react";
function ComponentA() {
  return /* @__PURE__ */ jsx("div", {
    className: "flex justify-center",
    children: "Component A",
  });
}
export { ComponentA as default };

使用此组件库的应用程序也在使用 Tailwind。但是，这些样式不会应用于导入的组件。应用程序特定的样式运行良好。

/* app/src/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

// app/src/App.jsx

import CompoenntA from "@component-library/ComponentA";
export default function App() {
  return (
    <div className="p-10">
      <ComponentA />
    </div>
  );
}

等待专家建议。

谢谢你！

Answer 1

目前，我也在做一个和你一样的类似项目。我已经使用rollup构建了我的组件库。它生成了一个 CSS 文件，然后将该 CSS 文件导入到我的主包中。

我的汇总配置

import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import swc from "rollup-plugin-swc";
import filesize from "rollup-plugin-filesize";
const packageJson = require("./package.json");

export default [
    {
        input: "index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: false,
                name: "@ht/components",
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: false,
            },
        ],
        plugins: [
            babel({
                // this is needed because we're using TypeScript
                babelHelpers: "bundled",
                extensions: [".ts", ".tsx"],
            }),
            external(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            postcss({
                config: {
                    path: "./postcss.config.js",
                },
                extensions: [".css"],
                minimize: true,
                extract: "lib.css",
            }),
            swc({
                jsc: {
                    parser: {
                        syntax: "typescript",
                    },
                    target: "es2018",
                },
            }),
            terser(),
            filesize(),
        ],
    },
];

主包索引

import "@ht/components/dist/cjs/lib.css";
import "./assets/css/tailwind.css";