Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dkbast opened this issue Sep 19, 2023 · 3 comments
Open
Labels
bug Something isn't working

Comments

@dkbast
Copy link

dkbast commented Sep 19, 2023

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:
image

@dkbast dkbast added the bug Something isn't working label Sep 19, 2023
@schultek
Copy link
Owner

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
Copy link
Author

dkbast commented Sep 20, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants