leptos/examples/tailwind_actix
2024-01-07 15:29:15 -05: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 chore: remove dead code in actix tailwind example (#2160) 2024-01-07 15:29:15 -05:00
style examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
.gitignore examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
Cargo.toml examples: change output names to clarify Tailwind examples (#2102) 2023-12-11 20:25:10 -05:00
LICENSE examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
Makefile.toml examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
README.md examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -04:00
rust-toolchain.toml examples: rename Tailwind examples (#1875) 2023-10-13 16:20:26 -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 cargo-leptos tool.

Getting Started

See the Examples README for setup and run instructions.

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 (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.