Leptos with Axum + TailwindCSS Tempate

This is a template demonstrating how to integrate TailwindCSS with the Leptos web framework, Axum server, and the cargo-leptos tool.

To use it first of all you need to have cargo-leptos installed on your machine

cargo install --locked cargo-leptos

Then run

npm run watch (This is a script which basically run the CLI tool to scan your template files for classes and build your CSS.)

and

cargo leptos watch

in this directory.

Open browser on http://localhost:3000/

You can begin editing your app at src/app.rs.

Installing Tailwind

You can install Tailwind using npm:

npm install -D tailwindcss

If you'd rather not use npm, you can install the Tailwind binary here.

Setting up with VS Code and Additional Tools

If you're using VS Code, add the following to your settings.json

  "emmet.includeLanguages": {
    "rust": "html",
    "*.rs": "html"
  },
  "tailwindCSS.includeLanguages": {
      "rust": "html",
      "*.rs": "html"
  },
  "files.associations": {
      "*.rs": "rust"
  },
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "on",
    "strings": true
  },
  "css.validate": false,

Install Tailwind CSS Intellisense.

Install "VS Browser" extension, a browser at the right window.
Allow vscode Ports forward: 3000, 3001.

Notes about Tooling

By default, cargo-leptos uses nightly Rust, cargo-generate, and sass. If you run into any trouble, you may need to install one or more of these tools.

1. rustup toolchain install nightly --allow-downgrade - make sure you have Rust nightly
2. rustup default nightly - setup nightly as default, or you can use rust-toolchain file later on
3. rustup target add wasm32-unknown-unknown - add the ability to compile Rust to WebAssembly
4. cargo install cargo-generate - install cargo-generate binary (should be installed automatically in future)
5. npm install -g sass - install dart-sass (should be optional in future

Alternatives to cargo-leptos

This crate can be run without cargo-leptos, using wasm-pack and cargo. To do so, you'll need to install some other tools. 0. cargo install wasm-pack

1. Edit the [package.metadata.leptos] section and set site-root to ".". You'll also want to change the path of the <StyleSheet / > component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at ./pkg and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to get_configuration() to pass in Some(Cargo.toml), so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.

Server Side Rendering With Hydration

To run it as a server side app with hydration, first you should run

wasm-pack build --target=web --debug --no-default-features --features=hydrate

to generate the WebAssembly to hydrate the HTML delivered from the server.

Then run the server with cargo run to serve the server side rendered HTML and the WASM bundle for hydration.

cargo run --no-default-features --features=ssr

Note that if your hydration code changes, you will have to rerun the wasm-pack command above before running cargo run

Client Side Rendering

You'll need to install trunk to client side render this bundle.

1. cargo install trunk Then the site can be served with trunk serve --open

Project Modifications - A work in progress

Config TailwindCSS for Leptos Rust project

Begin with leptos-tailwind-axum example project

Install cargo-x
    cargo install cargo-x
    Configure tasks in cargo.toml e.g.
        [package.metadata.x]
        ls = "ls -alh"
        dev = "cargo leptos watch"
        style = "npx tailwindcss -i ./input.css -o ./style/output.css --watch"

Install TailwindCSS and accessories
    npm remove tailwindcss
    npm install -D tailwindcss prettier prettier-plugin-tailwindcss
    Add tailwind plugin to Prettier config:
        // prettier.config.js
        module.exports = {
          plugins: ['prettier-plugin-tailwindcss'],
        }

Install VSCode extension "TailwindCSS kit"
Add rust to Tailwind CSS IntelliSense extension settings
    Open settings, search "@ext:bradlc.vscode-tailwindcss include Languages"
        Add "rust HTML"

Install VSCode extension "Prettier - Code formatter (Rust)
    Create '.prettierrc.json'test
    {
        "useTabs": false,
        "tabWidth": 4,
        "printWidth": 80,
        "endOfLine": "lf",
        "overrides": [{ "files": "**/*.rs" }]
    }

Add target to exclude list
    open settings, search "@ext:bradlc.vscode-tailwindcss files exclude"
        Add "**/target/**

Features:

Start dev environment from separate terminals:
    x dev
    x style

Tailwind Intellisense ***
---------------------
    Tailwind utility class sorting on save
    Tailwind utility class css details on hover
    Tailwind utility class suggestions on typing partial or CTRL-Space when hovering
    Tailwind color class swatch (automatic)

Tailwind Fold ***
-------------
    Ctrl-Alt-A - His show tailwind utility classes (cursor not in tailwind class attr)

Tailwind Config Viewer
----------------------
    Click Tailwind Config Viewer icon in left command panel
    --> shows entire tailwind class list, not local tailwind.config.js

Tailwind Docs
-------------
    Open Command Pallet (Cmd-Sht-P) search for 'tailwind D {feature}'
    Opens tailwind Docs in VSCode Simple Browser

Tailwind Documentation
----------------------
    Cmd-Ctrl-t Opens Tailwind Docs in VSCode side bar

Apply formatting, etc in Leptos Component and Server macros
    Add to VSCode settings.json
    "rust-analyzer.procMacro.ignored": {
        "leptos_macro": [
            "server",
            "component"
        ],
    }

*** Not working in .rs files