未在 npm 包中加载 Tailwind 3.0.7 类答案

【问题标题】：Tailwind 3.0.7 classes not loaded in npm package未在 npm 包中加载 Tailwind 3.0.7 类
【发布时间】：2022-02-16 02:39:56
【问题描述】：

我有一个 npm 包，它在其组件中使用了 tailwind 类。当我发布包并想在另一个项目中使用它时，组件加载但尾风类没有。在这个项目中，我使用 nx 来管理我的私有 npm 存储库。

tailwind.config.js 在我的包中

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 在我的项目中

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

【问题讨论】：

标签： javascript angular npm tailwind-css nrwl-nx

【解决方案1】：

在 webpack 配置中添加

const tailwindcss = require('tailwindcss');

【讨论】：

【解决方案2】：

我通过在 node_modules 中添加引用我的 npm 包的新内容解决了问题

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

【讨论】：