Documentation Index
Fetch the complete documentation index at: https://mintlify.com/DioxusLabs/dioxus/llms.txt
Use this file to discover all available pages before exploring further.
Dioxus provides multiple ways to style your components, from inline styles to external CSS files and CSS frameworks like Tailwind.
Inline Styles
Using the style Attribute
You can apply inline styles using the style attribute with CSS syntax:
use dioxus::prelude::*;
fn app() -> Element {
rsx! {
div {
style: "color: red; font-size: 20px;",
"Styled text"
}
}
}
Individual Style Properties
Dioxus allows you to set individual CSS properties as attributes using snake_case:
rsx! {
div {
color: "blue",
font_size: "24px",
background_color: "#f0f0f0",
padding: "20px",
margin: "10px",
border_radius: "8px",
"Styled content"
}
}
Common Style Properties
rsx! {
div {
// Layout
display: "flex",
flex_direction: "column",
align_items: "center",
justify_content: "center",
// Spacing
margin: "20px",
padding: "15px",
// Colors
color: "#333",
background_color: "white",
// Typography
font_size: "16px",
font_weight: "bold",
text_align: "center",
// Borders
border: "1px solid #ddd",
border_radius: "4px",
// Size
width: "100%",
height: "200px",
max_width: "800px",
}
}
Dynamic Styles
You can use Rust expressions for dynamic styling:
fn app() -> Element {
let is_active = use_signal(|| true);
let count = use_signal(|| 0);
rsx! {
div {
// Conditional colors
color: if is_active() { "green" } else { "gray" },
// Computed values
font_size: "{count() + 12}px",
// Format strings
padding: "{count() * 2}px",
}
}
}
CSS Classes
Using the class Attribute
rsx! {
div {
class: "container",
"Content"
}
}
Multiple Classes
You can specify multiple classes by including the class attribute multiple times:
rsx! {
div {
class: "container",
class: "centered",
class: "shadow",
"Content with multiple classes"
}
}
Conditional Classes
Use unterminated if statements for conditional classes:
fn app() -> Element {
let is_active = use_signal(|| true);
let has_error = use_signal(|| false);
rsx! {
div {
class: "button",
class: if is_active() { "active" },
class: if has_error() { "error" },
"Button"
}
}
}
External CSS Files
Loading CSS with asset!
Use the asset! macro to include CSS files:
use dioxus::prelude::*;
const STYLE: Asset = asset!("/assets/style.css");
fn app() -> Element {
rsx! {
Stylesheet { href: STYLE }
div { class: "container",
h1 { "Styled with external CSS" }
}
}
}
assets/style.css:
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
font-size: 2rem;
}
CSS Modules
CSS Modules provide scoped styling to avoid naming conflicts:
use dioxus::prelude::*;
fn app() -> Element {
#[css_module("/assets/component.css")]
struct Styles;
rsx! {
div { class: Styles::container,
h1 { class: Styles::title, "Scoped Styles" }
p { class: Styles::text, "Content" }
}
}
}
assets/component.css:
.container {
background: #f9f9f9;
padding: 20px;
}
.title {
font-size: 24px;
color: #007bff;
}
.text {
line-height: 1.6;
}
CSS Module Options
You can configure CSS modules with options:
#[css_module(
"/assets/style.css",
AssetOptions::css_module()
.with_minify(true)
.with_preload(false)
)]
struct Styles;
Global Classes
To use global classes within CSS modules, prefix them with :global:
/* This class will be scoped */
.container {
padding: 20px;
}
/* This class remains global */
:global(.global-class) {
margin: 0;
}
Tailwind CSS
Dioxus works seamlessly with Tailwind CSS:
Setup
- Install Tailwind CSS in your project
- Configure
tailwind.config.js:
module.exports = {
content: [
"./src/**/*.{rs,html}",
],
theme: {
extend: {},
},
plugins: [],
}
- Create your Tailwind CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Include it in your app:
const STYLE: Asset = asset!("/assets/tailwind.css");
fn app() -> Element {
rsx! {
Stylesheet { href: STYLE }
div { class: "container mx-auto px-4",
h1 { class: "text-4xl font-bold text-blue-600",
"Tailwind Styled"
}
}
}
}
Using Tailwind Classes
rsx! {
div { class: "min-h-screen bg-gray-100 flex items-center justify-center",
div { class: "bg-white rounded-lg shadow-lg p-8 max-w-md",
h1 { class: "text-3xl font-bold mb-4 text-gray-800",
"Welcome"
}
p { class: "text-gray-600 mb-6",
"Build amazing UIs with Dioxus and Tailwind"
}
button { class: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded",
"Get Started"
}
}
}
}
Conditional Tailwind Classes
fn app() -> Element {
let is_active = use_signal(|| false);
rsx! {
button {
class: "px-4 py-2 rounded font-bold",
class: if is_active() {
"bg-blue-500 text-white"
} else {
"bg-gray-200 text-gray-700"
},
onclick: move |_| is_active.toggle(),
"Toggle"
}
}
}
Best Practices
Component-Scoped Styles
Keep styles close to components using CSS modules:
#[component]
fn Card(title: String, content: String) -> Element {
#[css_module("/assets/card.css")]
struct Styles;
rsx! {
div { class: Styles::card,
h2 { class: Styles::title, "{title}" }
p { class: Styles::content, "{content}" }
}
}
}
Responsive Design
Use media queries in CSS or Tailwind’s responsive utilities:
rsx! {
div { class: "w-full md:w-1/2 lg:w-1/3",
"Responsive width"
}
}
Style Organization
- Use inline styles for component-specific, dynamic styles
- Use CSS modules for component-scoped static styles
- Use global CSS for site-wide styles and resets
- Use Tailwind for utility-first styling
- Prefer CSS classes over inline styles for static styling
- Use CSS modules to avoid global namespace pollution
- Minimize dynamic style calculations
- Use the
asset! macro for optimal asset loading
Next Steps
Events
Add interactivity to your styled components
Assets
Learn more about asset management
