MudEngine Part 1: Requirements
Tailwind CSS
Tailwind is a utility-first CSS framework. Instead of writing custom
selectors and property blocks, you apply pre-built atomic classes
directly in markup — flex, p-4, text-lg, bg-blue-500.
Each utility class maps to exactly one CSS property. p-4 sets
padding: 1rem, text-lg sets font-size: 1.125rem and
line-height: 1.75rem. Styles compose by stacking classes:
<div class="flex items-center gap-4 p-6 bg-gray-900 rounded-xl">
This eliminates context-switching between HTML and a separate .css
file. There are no naming conventions (BEM, SMACSS) to maintain and no
specificity battles — every class has equal specificity. The generated
CSS only includes the classes you actually use, keeping the bundle
under 10 KB gzipped for most projects.
The Jump-Start template generates a tailwind.config.js and an
assets/tailwind.css entry point that imports Tailwind's layers. The
Dioxus asset pipeline (manganis) runs the Tailwind CLI as a build
step, scanning your Rust source files for class name strings and
emitting a minified CSS file.
Hot-reload works: when you change a class in your rsx!, Tailwind
regenerates the CSS and Dioxus injects it via hot-reload — no browser
refresh needed. The assets/tailwind.css in this project is the
generated output; the source config lives in tailwind.config.js.