Dioxus and Tailwind CSS Setup

Setup Dioxus (version 0.7.x)

#

To set up the Dioxus framework follow their well-written getting started guide.

Once all is set up, you can create a new app with:

dx new app_name

and follow the interactive prompts to pick project specifics and target, i.e. Web, Desktop, etc.

The command above will create the necessary scaffolding.

You can now launch the dev server with:

dx serve

to check that all went smoothly. If something went wrong refer to their tooling setup guide.

Setup Tailwind CSS (version 4.1.x)

#

Follow the official process at:

https://tailwindcss.com/docs/installation/tailwind-cli

to install Tailwind itself and its CLI utility for a framework-agnostic setup.

The above commands require Node and npm. On my machine they’re versions:

$ node --version
v22.14.0

$ npm --version
10.9.2

Integrate Tailwind CSS into Dioxus

#

Add Tailwind to your main CSS file, i.e. if it’s input.css,

/* input.css */
@import "tailwindcss";

 /* Ignore "cannot resolve" dependency warnings in the import above. If tailwind is 
    installed in the node_modules folder, it will be resolved correctly. 
 */

/* Rest of styling */

In the package.json at the root of the project, add the following key:

"scripts": {
    "tailwind": "npx @tailwindcss/cli -i ./assets/input.css -o ./assets/output.css --watch"
  }

and execute with:

$ npm run tailwind

to run tailwind cli in watch mode, which rebuilds styling sources automatically when they change.

When all the steps above are in place, you should have one terminal running dx serve and another running npm run tailwind.

Add the generated css file to your Dioxus application

#

use dioxus::prelude::*;

const APP_STYLE: Asset = asset!("assets/output.css");

fn main() {
    launch(app)
}

fn app() -> Element {
    rsx! {
        Stylesheet { href: APP_STYLE },
        
        // use Tailwind classes in your code
        h1 { class: "text-center text-blue-600", "Hello World" }
    }
}

And that’s it!

Potential flaw of this approach

#

A potential flaw of this approach is that it doesn’t leverage the Dioxus.toml file generated by the dx new app_name command, and integrate the css infrastructure directly into Dioxus’ dev server. Theoretically, said integration should allow css refresh and app changes to be rebuilt and reloaded with only the dx serve command. However, I couldn’t find up-to-date instructions from their docs so went with the above.