perf: ⚡ Improve serve times on large codebase

[bjornharvold]

This conversation is ongoing here: angular/angular-cli#26378

By reading the above ticket, you understand that working with a large TailwindCSS codebase with many Angular components is a nightmare. One keypress in any source file, causes everything to have to be pre-processed again. In our case, an almost 300 second wait time before being able to see our changes.

Some would argue to make more use of Storybook to avoid running the entire app in development. I think we need to come up with a better way to avoid pre-processing a codebase where 99.9% of the code remained unchanged.

Any thoughts on this from Team Tailwind highly appreciated 🦸‍♂️

[bjornharvold]

Wondering if the config can be customized for each Angular component 🤔 So instead of every component having this config:

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const sharedTailwindConfig = require('../../../libs/tailwind-preset/tailwind-config');

module.exports = {
  presets: [sharedTailwindConfig],
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
};

It would instead only point to its own component:

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const sharedTailwindConfig = require('../../../libs/tailwind-preset/tailwind-config');

module.exports = {
  presets: [sharedTailwindConfig],
  content: [
    join(__dirname, 'src/my-domain/my-component/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
};