Tailwind 3.0.7 classes not loaded in npm package-CodePudding

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')],
};

CodePudding user response：

in the webpack config add

const tailwindcss = require('tailwindcss');

CodePudding user response：

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: [],
    }),
  ],
};