I’m stuck with a Tailwind CSS issue in my Angular project. I made a library using Tailwind and put it on NPM. When I use it in a new project, the styles don’t show up.
I added this to my tailwind.config.ts:
content: [
'./src/**/*.{html,ts}',
'./node_modules/my-component-lib/**/*.{html,js,ts}'
]
Tailwind works fine in the main app, but not for the imported library. Any ideas what I’m doing wrong? How can I get Tailwind to recognize the classes in my NPM package?
I’ve been scratching my head over this for hours. Is there a special trick to make Tailwind play nice with external libraries? Or am I missing something obvious in my config?
hav u tried adding the library’s path to ur purge config? sometimes tailwind needs a lil extra nudge to find external stuff. also, double-check if ur lib is actually exporting the styles. i ran into similar headaches before n it was cuz i forgot to include the css in the package. goodluck mate!
I encountered a similar issue when integrating a Tailwind-based component library. One crucial step is ensuring your library’s build process includes Tailwind’s CSS. Check if you’re properly generating and bundling the Tailwind styles within your package.
Additionally, verify that your main application’s Tailwind configuration is set to JIT mode. This can sometimes resolve issues with external libraries. If problems persist, consider explicitly importing the library’s CSS file in your main application’s styles.scss or equivalent.
Lastly, double-check your library’s package.json to ensure it’s exporting the correct files and paths. Sometimes, the issue lies in how the package is structured rather than Tailwind configuration itself.
I’ve been down this road before, and it can be a real pain. One thing that often gets overlooked is the build process for your library. Make sure you’re running Tailwind’s build step for your library separately before publishing to NPM. I had to set up a custom build script that runs Tailwind CLI on my library’s CSS file.
Also, check if your library’s CSS is being properly imported in your main project. Sometimes, you need to explicitly import it in your angular.json file under the styles array.
If all else fails, you might need to look into using CSS custom properties (variables) in your library instead of direct Tailwind classes. This way, you can define the variables in your main project and have them applied to your library components. It’s a bit more work, but it gives you more control over how styles are applied across different projects.