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

I tried tackling this but it has too large a scope, sorry. I leave you a few hints hoping they help you. The global styles (like bootstrap) aren't working because you are using CSS modules in your postcss config (which prefixes the styles, check the dist/index.css and look for "bootstrap-min"), remove the modules: true line and you're good. About the tailwind config I suspect that you need some kind of config or plugin, like explained in samrobbins.uk/blog/… — yuriy636
– yuriy636, Commented Feb 6, 2022 at 12:40
thank you very much :) the bootstrap style is now there but with tailwind is does not worked. I followed the steps at the blog — otto
– otto, Commented Feb 6, 2022 at 13:37
now it works. I had to change purge: ["./src/**/*.js"] to purge: ["./src/**/*.jsx"]. @yuriy636 I would give you the bounty when you are making a answer :) — otto
– otto, Commented Feb 6, 2022 at 13:41

yuriy636 · Accepted Answer · 2022-02-06 17:55:53Z

3

+150

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

edited Feb 6, 2022 at 17:55

answered Feb 6, 2022 at 15:19

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react rollup no styling with tailwind css and css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related