Integrating TailwindCSS with a Dioxus Desktop App in Rust

In this guide, we'll walk you through setting up a Dioxus desktop app project with TailwindCSS integrated.

Setup

1. Install platform-specific dependencies for Dioxus.

2. Create a new Rust binary project and navigate to its directory:

   cargo new --bin desktop-tailwind
   cd desktop-tailwind

3. Add Dioxus and the desktop renderer as dependencies (this will edit your Cargo.toml):

   cargo add dioxus
   cargo add dioxus-desktop

4. Replace the contents of your main.rs file with the following code:

   #![allow(non_snake_case)]
   // Import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
   use dioxus::prelude::*;

   fn main() {
       // Launch the Dioxus app in a webview
       dioxus_desktop::launch(App);
   }

   // Define a component that renders a div with the text "Hello, world!"
   fn App(cx: Scope) -> Element {
       cx.render(rsx! {
           div {
               "Hello, world!"
           }
       })
   }

Integrating TailwindCSS

1. Initialize TailwindCSS:

   npx tailwindcss init

This command will create a tailwind.config.js file.

2. Update tailwind.config.js to watch rs files in the src directory:

   module.exports = {
     content: ["./src/**/*.{html,rs}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }

3. Create a src/input.css file with the following content:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. Update main.rs to add a link to the output CSS file and apply some TailwindCSS classes:

   fn App(cx: Scope) -> Element {
       cx.render(rsx! {
           link { rel: "stylesheet", href: "../dist/output.css" },
           div {
               class: "w-full h-screen bg-gray-300 flex items-center justify-center",
               "Hello, world!"
           }
       })
   }

5. Start the TailwindCSS watcher to generate the output CSS file:

   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

6. Run the application:

   cargo run

That's it! You now have a Dioxus desktop app project integrated with TailwindCSS.