Rollup-React-Tailwind：并非所有来自 className 的类都在 Rollup 构建中

Question

项目简介： 我们公司内部使用的自定义 UI 库，包含

Storybook

、

React

、

Typescript

和

TailwindCSS

.

问题： 开发构建和故事书中的样式非常好。但是在其他项目中构建和使用后，UI 并不完美。我通过开发工具进行了检查，发现并非 className 中的所有类都在那里。其中一些存在，一些不存在。

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import image from '@rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true,
        name: 'react-ts-lib',
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      external(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' }),
      postcss({
        config: {
          path: './postcss.config.js',
        },
        minimize: true,
        modules: true,
        extract: true,
        extensions: ['.css'],
        inject: {
          insertAt: 'top',
        },
      }),
      terser(),
      image(),
    ],
  },
  {
    input: 'dist/esm/types/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    external: [/\.css$/, 'react', 'react-dom'],
    plugins: [dts.default()],
  },
];

package.json

{
  "name": "my-ui-lib",
  "version": "0.0.5",
  "description": "An internal UI library",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "scripts": {
    "build-babel": "babel src -d build --copy-files",
    "prepare": "npm run build",
    "clean": "rimraf dist",
    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "author": "******",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-image": "^3.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-typescript": "^11.0.0",
    "@storybook/addon-essentials": "^7.0.2",
    "@storybook/addon-interactions": "^7.0.2",
    "@storybook/addon-links": "^7.0.2",
    "@storybook/addon-styling": "^0.3.2",
    "@storybook/blocks": "^7.0.2",
    "@storybook/react": "^7.0.2",
    "@storybook/react-webpack5": "^7.0.2",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@tailwindcss/typography": "^0.5.9",
    "@types/react": "^18.0.32",
    "@types/react-dom": "^18.0.11",
    "autoprefixer": "^10.4.14",
    "flowbite": "^1.6.4",
    "flowbite-react": "^0.4.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.2.3",
    "prettier": "^2.8.7",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-svg": "^16.1.7",
    "rimraf": "^4.4.1",
    "rollup": "^3.20.2",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-svg": "^2.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "storybook": "^7.0.2",
    "tailwindcss": "^3.3.1",
    "tslib": "^2.5.0",
    "typescript": "^5.0.3"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      // something....
    },
  },
  plugins: [require('flowbite/plugin'), require('@tailwindcss/typography')],
};