Tengo un paquete npm que ha usado clases de viento de cola en sus componentes. Cuando publico el paquete y quiero usarlo en otro proyecto, los componentes se cargan pero las clases de viento de cola no. En este proyecto, he usado nx para administrar mi repositorio privado de npm.
tailwind.config.js en mi paquete
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 en mi proyecto
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')], };en la configuración del paquete web agregar
const tailwindcss = require('tailwindcss');
Resolví el problema agregando un nuevo contenido que hace referencia a mi paquete npm en 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: [], }), ], };