feat: update examples to tailwind v4

[danielkov]

Context

• Tailwind CSS V4 announcement
• Tailwind V3 -> V4 Upgrade Guide
• Enhancement suggestion: DioxusLabs/dioxus#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: DioxusLabs/docsite#473

[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 (https://github.com/DioxusLabs/dioxus-template/pull/68 and https://github.com/DioxusLabs/docsite/pull/473) both use the npx CLI