fix: tailwind css not being generated for components imported from a library

[dkbast]

Description

I want to create a component library with reusable jaspr components which should be styled using tailwind. I have create a new dart package with an example folder in which I want to showcase the components in the package.

The jaspr_tailwind builder only looks within its current directory (in this case the example) - as the imported components are outside of it, they are not evaluated and no css is generated for them.

Steps To Reproduce

1. Create a new package dart create -t package <PACKAGE_NAME>
2. Create a component inside the lib folder
3. Create an example in ./example using jaspr create and import the package with a relative import
4. Run the example

Expected Behavior

The tailwind builder should take a look at all used (imported) classes (recursively) and compile css for them.

Additional Context

For context, this is my project structure:

[schultek]

So looking at other (js) tailwind libraries, it seems like there isn't a standard solution here.

Most of them just tell you to modify the tailwind config and add the library sources to it. E.g. see for this: https://flowbite.com/docs/getting-started/quickstart/ unter item 3.

The same can be done here, as the package allows a custom tailwind.config.js file.

So for your example, you could add a tailwind.config.js file under wa_jaspr_components/example like this:

module.exports = {
  content: [
    "{lib,web}/**/*.dart",
    "../lib/**/*.dart"
  ]
}

This would probably already work (havent tested yet).

Next step could be to let the builder automatically add all the dependencies as sources (or somehow only detect the ones that use tailwind, otherwise the tailwind process will get super slow probably).

That still leaves the inefficiently that css will be generated for components that you don't use, but as said in the beginning this seems to be also the case for js tailwind libraries and seemingly not solved there either.

[dkbast]

For the example this would probably work, but the idea is to import this package in other jaspr projects where setting the path would not be as straight forward. Also as you mentioned, that would generate css for all components even for those not in use by the project. Maybe a build_runner step could be a solution here? Imho we would like to create a dependency graph with all used classes and then pipe them into tailwind. To make it a bit easier, we could probably add an annotation in the library?

[TJMusiitwa]

I am currently having the same or similar issue where it is not being generated for me. So I had to remove all the files mentioned in the docs and here and just resorted to using the cdn link from tailwind. It would be awesome to know if there is a fix for this or if the docs can be updated to let us know the correct method to set up or any gotchas to look out for.