I have a npm package that has used tailwind classes in its components. When I publish the package and want to use it in another project, the components load but the tailwind classes do not.In this project, I have used nx to manage my private npm repository.
tailwind.config.js in my package
module.exports = {
important: true,
purge: {
enabled: process.env.PURGE_TW === 'true',
content: [
'./apps/**/*.[html,ts]',
'./libs/**/*.{html,ts}',
'./packages/**/*.{html,ts}',
'./node_modules/\\@oranustech/ng-*/**/*.{html,ts,js}',
],
},
theme: {
extend: {
screens: {
xs: '350px',
},
},
colors: {
primary: {
DEFAULT: 'var(--color-primary)',
shade: 'var(--color-primary-shade)',
tint: 'var(--color-primary-tint)',
},
secondary: {
DEFAULT: 'var(--color-secondary)',
shade: 'var(--color-secondary-shade)',
tint: 'var(--color-secondary-tint)',
},
tertiary: {
DEFAULT: 'var(--color-tertiary)',
shade: 'var(--color-tertiary-shade)',
tint: 'var(--color-tertiary-tint)',
},
light: {
DEFAULT: 'var(--color-light)',
shade: 'var(--color-light-shade)',
tint: 'var(--color-light-tint)',
},
medium: {
DEFAULT: 'var(--color-medium)',
shade: 'var(--color-medium-shade)',
tint: 'var(--color-medium-tint)',
},
dark: {
DEFAULT: 'var(--color-dark)',
shade: 'var(--color-dark-shade)',
tint: 'var(--color-dark-tint)',
},
success: {
DEFAULT: 'var(--color-success)',
shade: 'var(--color-success-shade)',
tint: 'var(--color-success-tint)',
},
warning: {
DEFAULT: 'var(--color-warning)',
shade: 'var(--color-warning-shade)',
tint: 'var(--color-warning-tint)',
},
danger: {
DEFAULT: 'var(--color-danger)',
shade: 'var(--color-danger-shade)',
tint: 'var(--color-danger-tint)',
},
transparent: 'transparent',
},
},
variants: {},
plugins: [
require('tailwindcss-rtl'),
require('tailwindcss-animatecss')({
classes: ['animate__animated', 'animate__fadeInUp'],
settings: {},
variants: [],
}),
],
};
tailwind.config.js in my project
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
extend: {},
},
plugins: [require('tailwindcss-rtl')],
};
in the webpack config add
const tailwindcss = require('tailwindcss');
I solved problem by adding a new content that reference to my npm package in node_modules
tailwind.config.js
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
join(
__dirname,
'../../node_modules/<my npm package name>/**/!(*.stories|*.spec).{ts,html,js}'
),
...createGlobPatternsForDependencies(__dirname),
],
safelist: process.env.NODE_ENV === 'production' ? [] : [{ pattern: /./ }],
theme: {
extend: {
screens: {
xs: '350px',
},
},
},
plugins: [
require('tailwindcss-rtl'),
require('tailwindcss-animatecss')({
classes: ['animate__animated', 'animate__fadeInUp'],
settings: {},
variants: [],
}),
],
};