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

【问题标题】：How to include Tailwind CSS styles from React component library into the app CSS bundle?如何将来自 React 组件库的 Tailwind CSS 样式包含到应用程序 CSS 包中？
【发布时间】：2022-01-23 08:12:19
【问题描述】：

生日，

我正在使用 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>
  );
}

等待专家建议。

谢谢！

【问题讨论】：

标签： javascript css reactjs tailwind-css vite

【解决方案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";

【讨论】：