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.
Consider checking the library code is covered by the apps' content
file globs in their respective Tailwind configurations.