I am using metronic with angular, but the issue is for other systems as well:

Tailwind classes are not properly generated for any project, but copy/pasted from the pre builded folder: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular

This is not optimal and generates several issues:

1. Overhead. Tailwind builds only include the really needed classes. With this approach I get all the classes of the demo projects. To reduce size, I would have to reduce the demo and generate new files.
2. Variables do not work properly. If I have a color "mycolor" in tailwind and it is used as bg-mycolor, I cant just write text-mycolor. This does not work! This class was never compilated
3. Order of integration of files seem to matter. Tailwind should not care about order, now with precompiled classes and my own tailwind classes, order does matter!
4. I also have other weird errors, which were caused by the precompiled classes. Cant debug them now, but there are other issues.

My solution for now is:

Copy assets folder AND copy source css folder to angular. Then my tailwind.css has this import:

/* Metronic sources */ @import "./css/styles.css";

I dont include the precompiled styles.css anywhere. This almost works. The last issue is, that the source styles.css relies on 3 npm packages (for now):

• ktui
• vanilla-calendar-pro
• @simonwep/pickr

If I install these 3 packages, I can now compile tailwind properly (wohoo!).

My suggestion:

• Dont rely on these 3 packages as node modules for tailwind/css. Put them in assets or at least the files needed for tailwind compilation. I really dont want to manage these packages and their versions. Sooner or later I rely on a wrong version and my page breaks!

• Adapt the tutorial how to use it. Either write the new method or give both options.

Best Sam