← All Workshops

MudEngine Part 4: Single-Player Dioxus GUI

Step 8 / 10
◀ PrevNext ▶

Styling with Tailwind CSS

The inline styles on our Dioxus components work fine for a small example, but real apps use a stylesheet framework for consistent theming.

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes, you compose small single-purpose classes directly in your markup:

<div class="bg-gray-900 text-white p-4 rounded-lg">

Tailwind + Dioxus

Dioxus projects use Tailwind through a simple pipeline:

  1. A tailwind.css input file in assets/ with the Tailwind directives
  2. The dx CLI processes it into a compiled assets/tailwind.css output during dx serve
  3. Your Dioxus app links the output file with document::Stylesheet { href: asset!("/assets/tailwind.css") }

In this workshop we skip the Tailwind build step and write plain CSS instead — it keeps the setup minimal and the styling transparent. The dx new template already includes a assets/main.css that ships with the app.

Dark background CSS

Replace the contents of assets/main.css (created by dx new) with this dark-themed stylesheet for a moody interface that suits a MUD game:

mud-engine/assets/main.css
/* ── Global ── */
body {
    margin: 0;
    background: #0d0d1a;
    color: #c0c0d0;
    font-family: 'Courier New', Courier, monospace;
}

/* ── App container ── */
#main {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
}

/* ── World Grid ── */
.world-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: #1a1a30;
    padding: 4px;
    border-radius: 8px;
}

.world-grid .cell {
    padding: 10px;
    text-align: center;
    font-size: 13px;
    border-radius: 4px;
    background: #12122a;
    color: #5a5a7a;
}

.world-grid .cell.active {
    background: #3b82f6;
    color: #fff;
    font-weight: bold;
}

/* ── Description panel ── */
.description {
    background: #12122a;
    color: #d0d0e0;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

/* ── Feedback ── */
.feedback {
    color: #f87171;
    margin: 8px 0;
}

/* ── Command input ── */
.command-input {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
    background: #12122a;
    color: #d0d0e0;
}

.command-input::placeholder {
    color: #5a5a7a;
}
🎯 How Dioxus loads CSS

In the Dioxus app component, you include the stylesheet with:

rsx! {
    document::Stylesheet { href: asset!("/assets/main.css") }
    // ... your components
}

Add this line at the top of the App component's rsx! block, before any other elements. The asset!() macro resolves the file path relative to your project root at compile time and ensures the file is included in the final build.

One last inline style to replace

Almost every inline style: has already been replaced with a CSS class in the code above — except one. The feedback message <p> still uses inline styles:

p { style: "color: #ff6b6b; margin: 8px 0;", "{feedback}" }

Find this line in your src/main.rs and replace it with:

p { class: "feedback", "{feedback}" }

Once you do, the error text colour will change from #ff6b6b (salmon) to #f87171 (the red defined in the stylesheet). That is your cue that the stylesheet is being applied correctly.

Step 8 / 10
◀ PrevNext ▶