react rollup no styling with tailwind css and css

Question

I want to build a npm package with rollup but the styling is not available. I want to use style with tailwindcss, css or scss. I created a repo with demo code to demonstrate this issue. You can do the steps in README.md and then you will see that the styling is not applied Repo

This is my rollup.config.js

import babel from "@rollup/plugin-babel";
import image from "@rollup/plugin-image";
import json from "@rollup/plugin-json";
import commonjs from "rollup-plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import sourcemaps from "rollup-plugin-sourcemaps";
import postcss from "rollup-plugin-postcss";

const input = "src/index.jsx";

var MODE = [
  {
    fomart: "es",
  },
];

var config = [];

MODE.map((m) => {
  var conf = {
    input: input,
    output: {
      dir: `dist`,
      format: m.fomart,
      sourcemap: true,
    },

    inlineDynamicImports: true,
    plugins: [
      replace({
        "process.env.NODE_ENV": JSON.stringify("development"),
      }),
      nodeResolve({
        extensions: [".js", ".jsx"],
      }),
      postcss({
        minimize: true,
        modules: true,

        extract: true,
      }),

      json(),
      image(),
      babel({
        exclude: "node_modules/**",
        plugins: ["@babel/transform-runtime"],
        babelHelpers: "runtime",
      }),
      commonjs({
        include: "node_modules/**",
      }),
      sourcemaps(),
    ],
  };
  config.push(conf);
});

export default [...config];

Answer 1

The Bootstrap styles aren't working because of the PostCSS "modules" option in rollup config. This option prefixes the class names (you can see it in dist/index.css generated file, by looking for "bootstrap-min") in order to avoid conflicts, but in our case we want Bootstrap styles to be global.

postcss({
  minimize: true,
  modules: true, // <--- this line

  extract: true,
}),

by removing it, the Bootstrap CSS is generated without any CSS module prefix.

Regarding Tailwind, you have to install the compatibility build of Tailwind and configure its PostCSS plugin in the rollup config, like described in https://samrobbins.uk/blog/tailwind-component-library