leptos/examples/tailwind

Leptos Starter Template

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

If you don't have cargo-leptos installed you can install it with

cargo install --locked cargo-leptos

Then run

npx tailwindcss -i ./input.css -o ./style/output.scss --watch

and

cargo leptos watch

in this directory.

You can begin editing your app at src/app/mod.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

Attribution

Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, here.