Use Windi Css

Is there any guide on how can I use windycss with Hugo?

No there is no guide about integrating Windi CSS in a Hugo project.

But I suppose that you can refer to its JS API and integrate it with Hugo via js.Build

:cry:
I dunno anything about jsbuild.
I better stick with tailwind now

The link I posted above points to the documentation about Importing JS to a Hugo project via Assets.

I suppose that if you read it, you should be able to configure Windi in your project.

There is no other way I’m afraid.
Also as I said above there is no step-by-step for integrating that specific library in Hugo, at the moment.

Hmm… I wonder what happens when I type “windi CSS hugo” into that Google website with the search results and such…

First result: GitHub - taocode/hugo-theme-windicss-starter: Lightning-Fast Hugo with WindiCSS

More: windi css gohugo - Google Search

1 Like

hi @mukhtharcm

Don’t worry it is really easy you don’t need to know much about esbuild it is already there in Hugo

I did it yesterday all I did is created an

  1. esbuild.js file in assets>js directory
  2. js.html in layouts>partials>components directory

Do you have 2 similar files in your project?

the 1st file is where you can add the code suggested by windycss
in the 2nd file you simply combine multiple js files in one as I have multiple js files

if you have your project in a repo with public access I maybe can provide exact code you can add

hope this was helpful

thanks


a side note my method might not be the best as now when I check Hugo suggest js.build which I wasnt able to understand so I went nextjs style thanks


Another side note windycss is compatible with tailwindcss v2 but they haven’t updated anything for tailwindcss 3. and if you want to use tailwindcss 3 in Hugo there might be even more difficulties then the simple question js bundling in Hugo