-
Notifications
You must be signed in to change notification settings - Fork 599
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
Support tailwind for routes and islands from plugins #2159
Comments
Do you mind sharing your It does styles routes and islands if those folders are included in |
This was mainly a note to myself and for the ability to link this issue when someone else reports the problem. I'm well aware it styles routes/islands if listed, but the issue is that routes and islands provided by plugins don't get styled. By their very nature they don't exist on the filesystem. So I've started exploring a few options. Two workarounds that unblock people right now:
So as an example I have import { defineConfig } from "$fresh/server.ts";
import tailwind from "$fresh/plugins/tailwind.ts";
import { blogPlugin } from "../../src/plugin/blog.ts";
import localConfig from "./local.config.ts";
export default defineConfig({
plugins: [tailwind(), blogPlugin(localConfig)],
}); and import { type Config } from "tailwindcss";
export default {
content: [
"{routes,islands,components}/**/*.{ts,tsx}",
],
safelist: [
"max-w-screen-md",
"px-4",
"etc etc"
],
} satisfies Config; This would require some utility for plugin authors to easily scan their classes and generate the list. (Generating it by hand is error prone and annoying, as I've recently discovered.) Then users can just copy and paste the safelist into their config and the styles will get created (or more accurately: not removed). And what to do moving forward? The only viable option I see is to enhance the plugin API and the existing tailwind plugin. I suspect we would need to do something like the following:
Because tailwind's content configuration does not support URL paths, it's not as simple as just merging the list of files from plugins with those the user has provided. Perhaps the simplest is to generate our own safelist and merge it with whatever the user has provided. (Hopefully the user has provided nothing, since the tailwind docs say: The above is valid for devmode, where we have no build step. But if we're building something for deployment, then we could consider pulling in the list of files into I'll continue thinking about the problem, but I'm happy to receive feedback on the above or any other ideas. |
i am seeing this issue. We use a set of atomic controls that are in sub libraries. These are not all islands, but rather are just reusable components in many cases (for layouts and common controls). Right now, we've lost all styling on any of our subcomponents. I tried adding something like this to the tailwind config
But no luck with that. I'm working on creating a safelist for our packages for now, wondering what it might take to get this more plugged in. |
I also just tried this:
Thinking that if i pointed it where everything is downloaded that might work, but no luck |
@mcgear, is vendoring an option for you? That will put the plugin source files in your project directory, allowing tailwind to scan them. |
Vendoring is a new concept to me, it felt like a simple stop gap solution would be better than switching to vendoring. We ended up taking a slightly different approach that is sort of a hybrid (i think) between vendoring and safelisting. I ended up creating a few helper methods that allow me to generate a file in each of the libraries that contains the meta.url and all of the tsx files. For instances where libraries export out the other libraries, the new helpers generate a config with all the components. Finally, in the fresh application, the exported components are combined into a .config (text) file and the tailwind config is updated to look into that file. This way i don't have to safelist the tailwind classes (that was quite the endeavor), and the components being exported can be automated. Its a large file, but since tailwind setup is only incurred at startup, it seems to be working for me. Source for the helpers can be found here: The dev pattern is as follows... In the library that has tailwind classes that need to be added: Updates to the
And then in my
Then we add a
Once this is done, we execute the following command as part of our build task (or on its own):
After that is run, a new
In the case where there is a library that combines sub libraries there are a couple of additional changes... In the
And then an update to the
Then, when the
Finally, in the application that needs the tailwind styles, there are a few updates in the
Then in the
With all this in place, tailwind is correctly generating what we need to see things working. We have several libraries that needed this, so wanted something that would work for us in the short term. Working on an issue with our docker container build (https://github.com/o-biotech/biotech-manager-web/actions/runs/7458873509/job/20293710568), but it is working locally. |
I did try vendoring, but with one of the octokit libraries it fails:
|
We can use deno_graph to extract dependencies of plugins (i.e. all the .tsx files a plugin uses). Then I'm sure there's some "easy" way to get the content of the file. How does this help? I spent a few hours looking into modifying tailwind to support "remote content". But during my investigation, I stumbled upon this jewel: content: [
{
raw: html` <div class="md:w-full"></div> `,
},
], So this is a way of putting raw file content directly into tailwind -- it doesn't matter whether this content is local or not. Once I saw this, I realized I can just close the tailwind project (at least for now) and no longer make changes there. Instead we can simply modify I have bits and pieces of this working right now. I'll wire everything up later today and create a PR. Let's see what @marvinhagemeister has to say about the approach. |
Currently the tailwind plugin doesn't styles routes and islands provided by plugins.
The text was updated successfully, but these errors were encountered: