Angular NPM Published Library: Best practices to include library component's tailwind css in build process

[nik2208]

The more intuitive and less invasive solution I've come up with is including the library folder installed in node_modules as following

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}", "./node_modules/@test-group/**/*.{html,ts,js,mjs}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

but I'd say this is not referable at as best practice.
Any hint/opinion about that?

[AM-NiceDay]

Hey @nik2208!

While using cross-package configuration may not be ideal, it is not a primary feature in Tailwind CSS. So the way you have set it up is actually one of the best options to resolve the issue, unless you plan to switch to a monorepo for your projects. Therefore, it's fine to keep it as it is.

[nik2208]

fair enough! thank u. Any work in progress to make it structural in the future? Not a big fan of monorepos.. IMO package registries (easily self host-able) are much more elegant and less easily-screwable 😅 but it is just my opinion

[AM-NiceDay]

I don't have any information about such plans, but technically, there isn't much that can be done in this area. Tailwind analyzes the source code and doesn't get involved in the bundling process. Therefore, referencing source files is the approach adopted by some third-party Tailwind libraries.

[nik2208]

thank u again

[adamwathan]

Referencing node modules like you’re doing there is exactly what I’d recommend actually! What’s your concern with it?

[nik2208]

well I was just wondering If I was missing something.. Crawling an installed package ddnt sound much clean

[dfNaila]

@nik2208 hey i've been searching for a solution for 2 days now i tried yours but it's just not working i don't understand why ! so i generated a project with npm init and i installed tailwindcss and in the style @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ect.... and i installed the package in my angular project import it in the style.scss like that @import '../node_modules/mon-package/style.css'; but nothig ! when i use tailwind class in my component i get nothing please help

[nik2208]

what are you trying to do exactly?