TailwindCSS and Custom Styles Not Working After Publishing Angular UI Package, while works in...

I am developing a UI component library for multiple Angular projects, where the components are shared across different applications. I successfully developed the components, and they work perfectly within the development environment. However, after publishing the package, Tailwind CSS and custom designs are not working as expected.

I managed to fix the Tailwind CSS issue for a single component by following this Stack Overflow solution. It worked for that component, but when I applied the same solution to all components and republished the package, I encountered a build error, specifically a "JavaScript heap out of memory" error during the build process.

My Folder Structure ├───projects │ └───tus-ui-components │ └───src │ └───lib │ ├───class │ ├───tus-button │ ├───tus-check-box │ ├───tus-custom-date-picker │ ├───tus-date-picker │ ├───tus-dial-code │ ├───tus-input │ ├───tus-phone-number │ ├───tus-select │ ├───tus-table │ └───tus-text-area ├───public └───src └───app

Tried Solutions:

• Tailwind CSS: I followed this solution, and it worked, but it generated a 7 MB CSS file, which is unexpected given the amount of code.
• Heap Memory Increase: I tried increasing Node.js memory limits by setting --max-old-space-size=8192, but the same error persists (tried this Stack Overflow solution).

My questions:

• How can I ensure that TailwindCSS styles from the UI package are properly applied in the consuming Angular projects?
• Is there a specific configuration or step I need to include during the publishing or packaging process to ensure TailwindCSS works with my custom Angular UI package?
• Does Tailwind need to be installed separately in each consuming project, or can I bundle it directly with my package?

Project Setup:

• Angular: 18.2.4 (standalone components)
• Tailwind CSS: 3.4.10
• Package Link: npm package (Tailwind CSS works in version 0.0.3, but in 0.0.4, it’s not working due to the Tailwind fix being discarded)
• GitHub Repository: tus-ui-components

Continue reading...