leptos/examples/tailwind_csr

Leptos Starter Template

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

Getting Started

See the Examples README for setup and run instructions.

Tailwind

Trunk.toml is configured to build the CSS automatically.

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 (allows you to open a browser at the right window).

Allow vscode Ports forward: 3000, 3001.

Attribution

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

Quick Start

Run trunk serve --open to run this example.