Can't get WindiCSS working

[CanRau]

Hey there, your plugin looks very promising, thanks a lot for your efforts 🙏
I'm completely new to vite, worked only with Gatsby and Next so far with Tailwind.

I tried WindiCSS in a "raw" Vite scaffold (using the CLI) then installing Windi according to the vite-plugin-windicss docs which worked just as expected.

Trying to do replicate this in my beforehand scaffolded vite-plugin-ssr project using the CLI failed to import the CSS styles (only the custom properties --tw-* are included in the final build .css).

I've put the import "virtual:windi.css"; "everywhere" starting in _default.page.client.tsx than added to index.page.tsx without any changes.

Uh I'm also using useClientRouter in _default.page.client.tsx.

What am I missing or doing wrong?

[brillout]

At first glance, I wouldn't know why it doesn't work.

• @import 'tailwindcss/base'; does work as expected, correct?
• You did include WindiCSS() in your plugin list in vite.config.js, yes?

[CanRau]

Haven't tried any direct Tailwind stuff yet 🤔 How should I go about it?

Yes, WindiCSS() is in my vite.config.js, followed all setup steps which worked correctly as expected in plain vite-react-ts 🤷‍♂️

[brillout]

Let me have a look

[brillout]

Working example: https://github.com/brillout/vite-plugin-ssr-vite-plugin-windicss

[CanRau]

My fault I should have read the docs better 😅

It defaults to only working with files in /src had to include /pages to options as described here https://windicss.org/guide/vite.html#scanning

(already provided a PR to fix the typo in the example windcss/helpers, misses the second i)

[brillout]

👍 Let me know if you have any ohter question

[CanRau]

Working example: https://github.com/brillout/vite-plugin-ssr-vite-plugin-windicss

Just out of curiosity, I couldn't find any mention of actual Tailwind classNames, have you confirmed they're working?
As according to my trials and the Windi docs on scanning it shouldn't work ^^

[brillout]

I was wondering the same ^^; I just saw the Tailwind CSS included so I was assumings that things work. (I never used Tailwind CSS.)

had to include /pages to options

If this necessary then we should def add a little guide to vite-plugin-ssr's README. A PR would be warmly welcome :-).

[konsumer]

@brillout your demo didn't use any tailwind util classes. It doesn't error for me, but it doesn't apply any windicss styles either.

If I import 'virtual:windi.css' in PageLayout.jsx, it should work, but it doesn't:

Do I need to do something else?

[brillout]

It does: https://github.com/brillout/vite-plugin-ssr_windi-css/blob/2310ad8ea3889c0c9fe5f73d902be49b25315273/pages/index/index.page.jsx#L9.

Do I need to do something else?

Yes, see the warning at https://vite-plugin-ssr.com/windi-css.

Please read the docs before asking for help. See https://brillout.github.io/rules/.