CODEWITHSUNDEEP
reactjsnpmnext.jstailwind-css
alteboerse
alteboerse

Reputation: 101

Conflict caused by Tailwind CSS when imported as part of a React NPM package in NextJS app which has tailwind already installed

I created a custom React NPM package which is built on top of Tailwind CSS and includes it as a DevDependency:

main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js:

module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

When the package is imported in a nextJS app which has tailwind configured and installed, certain existing components of the nextJS app are not rendered anymore once the NPM package is installed and certain components are called from the package. However, the components coming from the react NPM package are rendered correctly.

Specifically, the sidebar suddenly disappears once components of the package are used on the site. The sidebar consists of components outside of the package but is styled using Tailwind CSS.

Before: enter image description here

After:

Screenshot

Many thanks for any hints!

Upvotes: 2

Views: 2079

Answers (1)

alteboerse
alteboerse

Reputation: 101

Solved the issue by myself. Turns out you need to add important: true in tailwind.config.js.

module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './data/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    important: true,
};

Upvotes: 4

Related Questions