Tailwind CSS classes contributor for component packages approach

I’m looking for a manageable approach to contribute classes to a final app that uses Tailwind CSS with a branched out components package that also use Tailwind CSS, so that the component classes end up bundled up into the project’s final app.css.

First, when component package is a local dependency - during the development stage. Since it does not show up in the deps directory (I’m guessing there’s no need since it’s already within the reach), then the only way to link to it would be pointing to the sources in app’s tailwind.config.js?

module.exports = {
  content: [
    "./js/**/*.js",
    "../lib/*_web.ex",
    "../lib/*_web/**/*.*ex",
    "../../local_components_package_name/lib/**/*.*ex",
  ],

Otherwise it would be

"../deps/components_package_name/lib/**/*.*ex".

Is this the way to go? Or there’s something more streamlined for this use case?

I see this is what Install_petal_components recommends doing:

module.exports = {
  content: [
    "../lib/*_web.ex",
    "../lib/*_web/**/*.*ex",
    "./js/**/*.js",
    "../deps/petal_components/**/*.*ex", // <-- ADD THIS LINE
  ],
1 Like