Skip to content

Latest commit

 

History

History

front

README.md

Setup

  1. Install the Dioxus CLI:
cargo install dioxus-cli

Make sure the wasm32-unknown-unknown target for rust is installed:

rustup target add wasm32-unknown-unknown
  1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
  2. Install the tailwind css cli: https://tailwindcss.com/docs/installation
  3. Initialize the tailwind css project:
npx tailwindcss init

Create frontend crate:

cargo new --bin demo
cd demo

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

cargo add dioxus
cargo add dioxus-web

This should create a tailwind.config.js file in the root of the project.

  1. Edit the tailwind.config.js file to include rust files:
module.exports = {
    mode: "all",
    content: [
        // include all rust, html and css files in the src directory
        "./src/**/*.{rs,html,css}",
        // include all html files in the output (dist) directory
        "./dist/**/*.html",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
  1. Create a input.css file with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Create a Dioxus.toml file with the following content that links to the tailwind.css file:
[application]

# App (Project) Name
name = "Rusty Films"

# Dioxus App Default Platform
# desktop, web, mobile, ssr
default_platform = "web"

# `build` & `serve` dist path
out_dir = "dist"

# resource (public) file folder
asset_dir = "public"

[web.app]

# HTML title tag content
title = "🦀 | Rusty Films"

[web.watcher]

# when watcher trigger, regenerate the `index.html`
reload_html = true

# which files or dirs will be watcher monitoring
watch_path = ["src", "public"]

# include `assets` in web platform
[web.resource]

# CSS style file
style = ["tailwind.css"]

# Javascript code file
script = []

[web.resource.dev]

# serve: [dev-server] only

# CSS style file
style = []

# Javascript code file
script = []

Bonus Steps

  1. Install the tailwind css vs code extension
  2. Go to the settings for the extension and find the experimental regex support section. Edit the setting.json file to look like this:
"tailwindCSS.experimental.classRegex": ["class: \"(.*)\""],
"tailwindCSS.includeLanguages": {
    "rust": "html"
},

Development

  1. Run the following command in the root of the project to start the tailwind css compiler:
npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch

Web

  • Run the following command in the root of the project to start the dioxus dev server:
dioxus serve --port 8000

Usefull resources