How would I setup a "3 layered" config (main/app/library)

[popoleeMaster]

I have a question concerning tailwind config structure in my Nx monorepo.

I am currently trying to setup a configuration like this :

tailwind.preset.js => the main configuration of all app and library. It will declare some basic value for the theme (like colors, spacing etc...) that is used everywhere in the app.

fe:

  theme: {
    extend: {
      colors: {
         red: {
           1: #F00
         },
      },
   }

tailwind.config.js => the configuration of a app, this will declare the theme of that app and all library used by this app. for exemple defining a primary color in the list of colors, imported from the palette of the preset. This primary colors will be used in the app and all library that the app import.

fe:

  theme: {
    extend: {
      colors: {
        primary: palette.red[1],
      },
   }

so here I could use like text-red-1 but also text-red

tailwind.?.js => the configuration of the library, so this library would add additional stuff to the theme, but also import all previous colors. so like. So in this library if I

fe:

  theme: {
    extend: {
      colors: {
        toggle: palette.orange[1],
      },
   }

so here I could use like text-red-1 but also text-red but also text-toggle. It is important to note that depending which app implement this lib, the primary can be different.

I am struggling with that last part. the primary is not found and can't be used in the library. The way I declare this last config is like

tailwind.config.ts

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  presets: [require(join(__dirname, '../../tailwind.preset'))],
  theme: {
    extend: {
      colors: {[
        chartTooltip: '#475563',](toggle: palette.orange[1],)
      },
    },
  },
  plugins: [],
};

postcss.config.js

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

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

I guess this is wrong ?

[wongjn]

Yes, you seem to be trying to define the configuration file that Tailwind uses to be tailwind.config.js, but it should point to tailwind.?.js:

 plugins: {
   tailwindcss: {
-    config: join(__dirname, 'tailwind.config.js'),
+    config: join(__dirname, 'tailwind.?.js'),
   },
   autoprefixer: {},

Consider ensuring that the tailwind.config.js is within the presets chain. You could do this by having it be the preset that tailwind.?.js files use:

module.exports = {
  presets: [require('./path/to/tailwind.config.js')],
  // …
};

Furthermore, you seem to have some syntax errors in tailwind.config.js:

colors: {[
  chartTooltip: '#475563',](toggle: palette.orange[1],)
},

I'm not sure what you were intending here so I can't offer a correction, but this should be looked at and rectified.

[popoleeMaster]

Hi, Thanks for the reply. The issue I have is, in the case you point, tailwind.?.js will looks like

module.exports = {
  presets: [require('./path/to/tailwind.config.js')],
  // …
};

but this mean that this library will need to know about the app config, therefore, if I build app A or app B I will need to switch manually what config this library is used (and all the other library in the project). Is there a way to have abstraction on library, so that they just extends the tailwind theme, but they

1. don't need to know about the preset neither the app config. they just extends and use whatever they are given.
2. they can use the tailwind custom class that were defined above chain. so like in this case primary colors.

[wongjn]

You could try something like:

tailwind.config.js

const preset = require('./path/to/tailwind.preset.js');

module.exports = {
  presets: [
    preset,
    require('./path/to/tailwind.?.js')(preset),
  ],
};

tailwind.?.js:

module.exports = (preset) => ({
  theme: {
    extend: {
      colors: {
        toggle: preset.theme.extend.orange[1],
      },
    },
  },
});