Can't get WindiCSS working about vike HOT 10 CLOSED

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/.

from vike.

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?

from vike.

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 🤷‍♂️

from vike.

Let me have a look

from vike.

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

from vike.

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)

from vike.

👍 Let me know if you have any ohter question

from vike.

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 ^^

from vike.

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 :-).

from vike.

@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?

from vike.