website: migrate tailwindcss v3 to v4

[shivarm]

For more information check issue

closes: #579

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
zudoku-cosmo-cargo	✅ Ready (Inspect)	Visit Preview		Feb 4, 2025 6:53pm
zudoku-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 4, 2025 6:53pm
zudoku-ship-happens	✅ Ready (Inspect)	Visit Preview		Feb 4, 2025 6:53pm
zudoku-www	✅ Ready (Inspect)	Visit Preview		Feb 4, 2025 6:53pm

[vercel]

@shivarm is attempting to deploy a commit to the Zuplo WWW Team on Vercel.

A member of the Team first needs to authorize it.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 10aaf94.

Command	Status	Duration	Result
nx run-many -t build --projects=tag:example	✅ Succeeded	1m 1s	View ↗
nx run-many -t lint:ci format:ci build:ci test	✅ Succeeded	28s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-04 18:54:03 UTC

[shivarm]

@dan-lee I need your help here

zudoku/packages/zudoku/package.json

Line 239 in 34f0b3d

"tailwindcss": "3.4.17",

In order to migrate, we have to go through the config and you know better than me. So it would be nice if you can take a look

[dan-lee]

@dan-lee I need your help here

zudoku/packages/zudoku/package.json

Line 239 in 34f0b3d

"tailwindcss": "3.4.17",

In order to migrate, we have to go through the config and you know better than me. So it would be nice if you can take a look

Hey @shivarm I think that transition isn't as easy, as we configure a lot of Tailwind in the PostCSS plugin. Going configless will create some challenges. We probably need to use @source but this will be a bit tricky as the sources are dynamic in our case. Maybe a Vite plugin that creates the sources dynamically in the load hook will do.

So basically code generation (as we do in a lot of Vite plugins).

1. Import like virtual:zudoku-tailwind.css
2. Register Vite plugin that hooks into that
3. Generate CSS text content with a bunch of @source calls that are put together similar to this:
   

   zudoku/packages/zudoku/src/vite/config.ts

   Lines 303 to 317 in 9713d55

   	content: [
   	// Zudoku components and styles
   	// Tailwind seems to crash if it tries to parse compiled .js files
   	// as a workaround, we will just ship the source file and use those
   	// `${moduleDir}/lib/**/*.{js,ts,jsx,tsx,md,mdx}`,
   	`${pluginOptions.moduleDir}/src/lib/**/*.{js,ts,jsx,tsx,md,mdx}`,
   	// Include the config file and every file it depends on
   	config.__meta.path,
   	...config.__meta.dependencies.map(
   	(dep) => `${path.dirname(config.__meta.path)}/${dep}`,
   	),
   	`${dir}/src/**/*.{js,ts,jsx,tsx,md,mdx}`,
   	// All doc files
   	...getDocsConfigFiles(config.docs, dir),
   	],

[shivarm]

@dan-lee I need your help here

zudoku/packages/zudoku/package.json

Line 239 in 34f0b3d

"tailwindcss": "3.4.17",

In order to migrate, we have to go through the config and you know better than me. So it would be nice if you can take a look

Hey @shivarm I think that transition isn't as easy, as we configure a lot of Tailwind in the PostCSS plugin. Going configless will create some challenges. We probably need to use @source but this will be a bit tricky as the sources are dynamic in our case. Maybe a Vite plugin that creates the sources dynamically in the load hook will do.

@dan-lee If this is, then can we merge it for website? instead packages

[dan-lee]

Thanks so much @shivarm! 🙏