Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

743
Visualizações
react rollup no styling with tailwind css and css

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];
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda