Is it possible to make PostCSS plugins work with cargo-leptos? How does the TailwindCSS support work?

[saikatdas0790]

I'm trying to use this CSS variables framework with Leptos.

https://open-props.style/#getting-started

It is a superior alternative to TailwindCSS and provides me an opinionated design system without the additional baggage of TailwindCSS.

Specifically I'm trying to make the JIT mode work

Grateful for any guidance/inputs on how to make this work

[tqwewe]

I personally just run postcss in a separate terminal and point cargo leptos to my build css file.

[saikatdas0790]

This sounds like a decent workaround for now

[saikatdas0790]

@tqwewe Do you have a public repo that I could check to see how you've set this up?

[tqwewe]

Nothing public, but you can just use postcss-cli to build your CSS, and then point cargo leptos to that built css file with the style-file key.

[saikatdas0790]

@tqwewe
Got it, and how are you currently writing your styles inside your Leptos components?
Does the PostCSS CLI watch over your entire src folder?
And do you use npm in the same directory to install PostCSS plugins in your project or is that managed separately?

[tqwewe]

How are you currently writing your styles inside your Leptos components?

I was previously using TailwindCSS, so just classes. Now I'm using HalfMoonCSS which is just CSS classes too.

Does the PostCSS CLI watch over your entire src folder?

It can if you configure it that way, this is useful for tailwind and purging.

And do you use npm in the same directory to install PostCSS plugins in your project or is that managed separately?

I just use npm in the same directory, so when I run my app just cargo leptos watch and npm run dev or something like that.