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.
Top comments (0)