Dynamic css classes at render time

[4l1fe]

Hey, in my case there are a couple of colors i input in model fields interactively to include them in html later on. It looks like:

[fields.color_1]
label = Color
type = string

<span class="text-[{{ this.color_1] }}"  # rendered class is like `text-[#735461]`

The problem is that tailwindcss can't find the final state of html classes BEFORE all the artifacts(html files) have been built. Manually i do for it:

1. lektor build
2. Configure tailwindcss to inspect build folder for built htmls.
3. npx tailwindcss --input input.css --output build/static/style.css
4. publish artifacts

Does the plugin take into account such the case? The result i got using plugin seems to be not contained the dynamic css classes.

[frostming]

Does the plugin take into account such the case? The result i got using plugin seems to be not contained the dynamic css classes.

No, as a Python SSG, it's natural we can't use the full power of tailwindcss

[4l1fe]

Does the plugin take into account such the case? The result i got using plugin seems to be not contained the dynamic css classes.

No, as a Python SSG, it's natural we can't use the full power of tailwindcss

But what about handling other events after-build or after-build-all instead of on_before_build, will it work if i manually change plugin locally?

[frostming]

Does tailwindcss watch work as expected?

[4l1fe]

Does tailwindcss watch work as expected?

Only if it watches the final artifacts, not jinja templates, because in jinja templates css classes are jinja variables. In the final html files those css classes are rendered so tailwindcss watch can indetify them and include into the style.css. Due to that, i asked whetherthe plugin be modified to do its feature during other event when the final artifacts are built.

[frostming]

I see, but the watch files are configured in tailwindcss.config.js.

So let me clarify, in lektor serve, since tailwind is started in watching mode, as long as tailwindcss is configured correctly, it can be rendered correctly

However in lektor build, since the hook is run in before_build stage, it can't collect the files under build folder. Is that right?

[4l1fe]

So let me clarify, in lektor serve, since tailwind is started in watching mode, as long as tailwindcss is configured correctly, it can be rendered correctly

That's not correct for the specific case when you have dynamic variables of css classes. tailwindcss has no clue of how to interpret those variables(example in the first post).

However in lektor build, since the hook is run in before_build stage, it can't collect the files under build folder. Is that right?

All is fine with collecting.

[frostming]

tailwindcss has no clue of how to interpret those variables(example in the first post).

Wouldn't it be able to collect the files in build dir as well?

[mathrick]

Running into the same issue. The problem is that the watcher is configured to look at the templates, rather than the build output, so tailwindcss never sees the final HTML files, and thus can't see any class names dynamically generated by Jinja. Since by default the build folder is not located in the source dir, this cannot be easily solved by just changing the content config key; the plugin would need to expose the location of build in a way that can be referred to easily in the config.