reactjsnpmnext.jstailwind-css

Override Tailwind theme from component library in NextJS app


I work on a front-end project with the following architecture :

I would like the applications to be able to override the library's theme and use their own. For example, the "Button" component has the utility classes below :

bg-primary text-secondary

tailwind config file in the library :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './stories/*'],
  theme: {
    extend: {
      colors: {
        primary: 'blue',
        secondary: 'white',
      }
    },
  },
  plugins: [],
  mode: 'jit',
};

tailwind config file in the app #1:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
            primary: 'red',
            secondary: 'green',
      },
    },
  },

  plugins: [],
}

tailwind config file in the app #2:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
            primary: 'gray',
            secondary: 'yellow',
      },
    },
  },

  plugins: [],
}

Problem This works only partially, only the utility classes defined in the application outside of the components used in the library are applied.

Example In the app #1, the button will apply the bg-primary class as red because it is used somewhere else in the app. But text-secondary will not be applied as green because I never used this utility class in my project. "text-secondary" is not generated by Tailwind so the css from the library is used instead and the text of the button is white.


Solution

  • Consider checking the library code is covered by the apps' content file globs in their respective Tailwind configurations.