TheLazy.Dev
Portfolio GitHub

Blog

dioxus |tailwindcss |rust |gui

Integrating TailwindCSS with a Dioxus Desktop App in Rust

dimaportenko

Dima Portenko

Posted on May 1, 2023

Integrating TailwindCSS with a Dioxus Desktop App in Rust

Demo app screenshot

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
Enter fullscreen mode Exit fullscreen mode

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



   cargo add dioxus
   cargo add dioxus-desktop
Enter fullscreen mode Exit fullscreen mode

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!"
           }
       })
   }
Enter fullscreen mode Exit fullscreen mode

Integrating TailwindCSS

1. Initialize TailwindCSS:



   npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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: [],
   }
Enter fullscreen mode Exit fullscreen mode

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



   @tailwind base;
   @tailwind components;
   @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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!"
           }
       })
   }
Enter fullscreen mode Exit fullscreen mode

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



   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Enter fullscreen mode Exit fullscreen mode

6. Run the application:



   cargo run
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
dimaportenko
Dima Portenko

Posted on May 1, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Integrating TailwindCSS with a Dioxus Desktop App in Rust
dioxus Integrating TailwindCSS with a Dioxus Desktop App in Rust

May 1, 2023