feat: update examples to tailwind v4

[danielkov]

Context

• Tailwind CSS V4 announcement
• Tailwind V3 -> V4 Upgrade Guide
• Enhancement suggestion: Add Details For Tailwind V4.0 To Documentation #3878

What changed?

• Updated examples/tailwind to use V4 Tailwind CSS CLI
  • Removed tailwind.config.js as it is unnecessary for V4 with a minimal setup
  • Updated outdated utility classes
• Updated example-projects/ecommerce-site to use V4 Tailwind CSS CLI

See also

• Updated docs: docs: update Tailwind CSS guide for v4 docsite#473

[jkelleyrtp]

Thanks for the PR!

I see several package.json and package-lock.json files being generated....

I believe we don't need those - the tailwind CLI should be able to work without it.

Do you mind removing those and/or updating any docs to match?

[danielkov]

Hi @jkelleyrtp 👋

Thank you for the review!

the tailwind CLI should be able to work without it

That has not been my experience. I had to run npm install with at minimum this package.json file present, before running npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css, otherwise I got something along the lines of:

module "tailwindcss" not found

Do you mind sharing your setup / steps, just so I can confirm and update accordingly? 🙏

[jlowry]

Do you mind sharing your setup / steps, just so I can confirm and update accordingly? 🙏

I've tested it and can confirm the The Tailwind CSS Standalone CLI does not need a package.json. See https://tailwindcss.com/blog/standalone-cli

[ealmloff]

It depends how you install the tailwind CLI. If you run the CLI via npx which is the default in the tailwind docs then the new version does get installed in your node modules. If you use the standalone CLI, it does not.

The other two PRs that update tailwind (DioxusLabs/dioxus-template#68 and DioxusLabs/docsite#473) both use the npx CLI