refactor(tailwind): bump all projects to v4 with vite tailwind plugin

[tylersayshi]

docs: https://tailwindcss.com/blog/tailwindcss-v4

swapped to vite plugin to improve dev perf as well per the rec from the blog post.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
waku	✅ Ready (Inspect)	Visit Preview	Jan 26, 2025 10:15pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[tylersayshi]

@dai-shi it seems like the examples work with vite.config.ts but not with the common member of unstable_viteConfig in waku.config.ts

The website seems to be having a different bug that I am investigating - weird that that wasn't there before

[dai-shi]

but not with the common member of unstable_viteConfig in waku.config.ts

Is it for DEV or PRD? Or both?

[tylersayshi]

but not with the common member of unstable_viteConfig in waku.config.ts

Is it for DEV or PRD? Or both?

both

[dai-shi]

Now that you have tried and learned it, what do you think about #1185 approach without vite plugin? Do you think using the vite plugin is less confusing or more confusing?

[tylersayshi]

Now that you have tried and learned it, what do you think about #1185 approach without vite plugin? Do you think using the vite plugin is less confusing or more confusing?

from a user perspective, if the vite solution works I think the complexity is equivalent

postcss.config.js or adding a vite plugin seem like the same sort of setup step to me.

---

I think it is worth following the tailwind recommendation of using the vite plugin for "performance and the best developer experience".

Maybe we could give an easier way to add vite plugins to waku though? this seems a bit verbose for just "add a plugin"

export default defineConfig({
  unstable_viteConfigs: {
    common: () => ({
      plugins: [tailwindcss()],
    }),
  },
});

[dai-shi]

this seems a bit verbose for just "add a plugin"

It's still "unstable".

I think it is worth following the tailwind recommendation of using the vite plugin

I don't disagree, but we might not be ready yet.

postcss.config.js or adding a vite plugin seem like the same sort of setup step to me.

So, I'm fine with postcss.config.js for an intermediate/temporary solution. But, it's up to you.

[tylersayshi]

@dai-shi i agree with all the above. I'll set it back to the postcss setup in the morning :)

[tylersayshi]

@dai-shi I was able to get this working with vite.config.ts + the hack to skip css files in processModule. Everything should be ready now I think :)

[dai-shi]

LGTM

We are still interested in learning why unstable_viteConfigs.common doesn't work for the tailwindcss vite plugin. For now, having vite.config.ts is fine, but we should be able to configure everything through waku.config.ts. Having two config files doesn't feel nice.