如何将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>
  );
}

等待专家建议。

谢谢！

- fakhrizaki

Answer 1

你应该在tailwind.config.js文件中添加组件的路径。

在我的情况下，我的组件库使用链接到当前项目，并且遇到了相同的问题。这是我在tailwind.config.js中添加的内容：

module.exports = {
  // use content instead of purge if using tailiwind v3
  purge: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",

    // this line fixed the issue for me
    "./node_modules/{component-library-name}/src/**/*.{js,jsx,ts,tsx}"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
};

- Kumar Parth

Answer 2

目前，我也正在进行与您类似的项目。我使用 rollup 构建了我的组件库。它生成了一个 CSS 文件，然后将该 CSS 文件导入到我的主包中。

我的 Rollup 配置

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";

- Hasan Mobarak