5

I created NX library for custom components with React and TailwindCSS.

It has basic NX rollup setup.

I tried to add custom colors to my tailwind.config.js like this:

const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {
      colors: {
        'black-1': `#123`,
      },

    },
  }
  plugins: [],
};

postcss.config.js

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

When I'm using custom color to style components, my library throws (on build)

 bg-black-1 was not found

When I try to use components from this library in nx application, it also throws an error and application is broken. However, when I'm adding colors that are used in library to tailwind config in my application, everything works perfectly fine.

I need this library to be separated and works without changing application config.

viciousP
  • 510
  • 3
  • 14

0 Answers0