update tailwind configuration to adequate to v4

[ArturAssisComp]

This PR solves the bug described in the issue 4013 of the dioxus repository. Basically, the template used when tailwind css is added to the project directs the user to install the latest version of the tailwind css (v4)

### Tailwind
1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation
3. Run the following command in the root of the project to start the Tailwind CSS compiler:

```bash
npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch

As stated by LeWimbes, the current configuration for tailwind works well with tailwind v3, but not v4.

Changes made

All the changes were made for the JumpStart and BareBones subtemplates.

• Updated tailwing cli command in readme: https://tailwindcss.com/docs/upgrade-guide#using-tailwind-cli
• Removed @tailwind directives from input.css: https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives
• Removed all tailwind.config.js and their references from conditional-files.rhai file: https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
• Specify tailwind CLI for the URL in readme that redirects to taiwlind installation.

Tests

The changes were tested for JumpStart/desktop and BareBones/web, with some simple tailwing configurations.

[pasestars]

As per the documentation, it's possible to add @config "tailwind.config.js"; to the input.css file, but why remove it afterward?

[ArturAssisComp]

It is supported for backward compatibility. For that reason, I think that it is not expected that new projects use js config files.

[ealmloff]

Thanks for working on this! This mostly looks good.

When you install tailwind css with npm (npm install tailwindcss @tailwindcss/cli) it adds itself to the node modules in your repo. Could you add the node modules to the git ignore in the template so those files don't end up being committed?

[ArturAssisComp]

Added the nome modules to gitignore.

[hiteshjasani]

Were you aware that tailwindcss cli does not need a dependency on npm? You can get a prebuilt tailwindcss cli binary for your platform.

# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

Then simply run it tailwindcss -i ./input.css -o ./assets/tailwind.css --watch.

• https://tailwindcss.com/blog/standalone-cli
• https://github.com/tailwindlabs/tailwindcss/releases

[Nejat]

Hi, a little late to the conversation, was just reading through Tailwind docs and the Upgrade Guide suggests sticking with V3 if you have a requirement to support older versions of browsers, since V4 is for relatively new browser versions.

This is usually relevant in many enterprises where Sec Ops are slow to change or even reluctant to upgrade software, so it occurred to me that it could be important to support multiple versions of Tailwind.

Given that there are no Rust changes in this PR, is there a way to handle multiple versions of Tailwind efficiently in this context?

Curious to hear your thoughts on whether this is feasible and how it could be approached.

[ArturAssisComp]

Given that there are no Rust changes in this PR, is there a way to handle multiple versions of Tailwind efficiently in this context?

In my opinion, it is. Version 3 was already being supported. It is only necessary to add more options to the template.
After selecting yes for tailwind option, the user would be prompted to select the version:

> Do you want to use Tailwing CSS?
yes
> What version (default: v4)?
v4
v3

I don't know about older versions, though (v2, v1).

[ArturAssisComp]

Were you aware that tailwindcss cli does not need a dependency on npm? You can get a prebuilt tailwindcss cli binary for your platform.

# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

Then simply run it tailwindcss -i ./input.css -o ./assets/tailwind.css --watch.

• https://tailwindcss.com/blog/standalone-cli
• https://github.com/tailwindlabs/tailwindcss/releases

I will test this approach. To me, it sounds better.

[Nejat]

@ArturAssisComp

On Mac you can you use brew to install the binary version, this is what I did.

https://formulae.brew.sh/formula/tailwindcss#default

Though I haven't used it, winget on Windows also has the binary version

https://winget.ragerworks.com/package/TailwindLabs.TailwindCSS

[jkelleyrtp]

We are shipping inline support for the non npm tailwind CLI in 0.7!

https://x.com/dioxuslabs/status/1920270420466675848

It hasn't been generating package.json for me.

[wiseaidev]

Hi, a little late to the conversation, was just reading through Tailwind docs and the Upgrade Guide suggests sticking with V3 if you have a requirement to support older versions of browsers, since V4 is for relatively new browser versions.

This comment is seriously underrated. I recently learned this the hard way after building and testing a ~200k LOC frontend app, everything broke on older versions of Safari and other browsers on macOS. I had to rewrite everything and revert back to Tailwind v3.

To avoid browser compatibility issues, I recommend pinning Tailwind to v3 for now.

[Nejat]

We are shipping inline support for the non npm tailwind CLI in 0.7!

https://x.com/dioxuslabs/status/1920270420466675848

It hasn't been generating package.json for me.

I have observed the same behavior using the binary cli for tailwind.

Though you do need node.js and a package.json if you plan to use plugins.

{
  "devDependencies": {
    "daisyui": "^5.0.35"
  }
}

* worth noting with the binary version of tailwind, you only need the plugins referenced in your package.json, none of the tailwind dependencies.

[jkelleyrtp]

Hey! I had a hard time resolving some git issues since I just made a new v0.7 branch, but I included your changes and tagged you as a co-author

3b6f347

I'm going to just pin v3 for the 0.6 template and we'll make v4 the default in 0.7

[spookyvision]

as tailwind v4 is now the upstream default, this results in a degraded experience in dx new (when using tailwind), whose generated README.md states:

2. Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation

Following these instructions leads to a semi broken tailwind setup, as the scaffolding (tailwind.css, tailwind.config.js) is tailored towards tailwind v3, not v4.

maybe point to https://v3.tailwindcss.com/docs/installation instead? (and point out that v4 is not supported out of the box)

Update: made a PR against Dioxus v0.6
Update update: another, better PR already exists