leptos/examples/tailwind_csr
2024-08-01 19:39:54 -04:00
..
end2end examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
public examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
src stable examples change (#2497) 2024-04-04 20:11:28 -07:00
style examples: use trunk's built-in way of handling tailwind (#2557) 2024-05-06 08:49:07 -04:00
.gitignore examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
Cargo.toml chore: update gloo-net and reqwest to http 1.0 (closes #2688) (leptos 0.6) (#2751) 2024-08-01 19:39:54 -04:00
index.html examples: use trunk's built-in way of handling tailwind (#2557) 2024-05-06 08:49:07 -04:00
LICENSE examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
Makefile.toml examples: use trunk's built-in way of handling tailwind (#2557) 2024-05-06 08:49:07 -04:00
README.md docs: make it easy to see how to run each example in its README (#2085) 2023-11-28 11:47:56 -05:00
rust-toolchain.toml chore(ci): run all examples under stable and fix remaining linting issue (#2503) 2024-04-05 16:09:23 -04:00
tailwind.config.js examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00

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.