create-tailyew-app

✨ TailYew

A zero-config CLI to scaffold and bootstrap a production-ready TailYew frontend SPA.

🚀 Instantly spin up a modern Yew + TailwindCSS app!

Pure Rust & WASM in production — no JS needed to run your UI.

Note: Tailwind’s CLI (via npm) is still required for development builds, and the dev server runs on Trunk.

Dreaming of a totally Rust-native toolchain? Us too! We’re open to ideas and contributions.

✅ Yew 0.22 Ready
Projects scaffolded with create-tailyew-app use Yew 0.22 and TailYew v0.1.43 by default.

✨ What is this?

create-tailyew-app is the official scaffolding tool for the TailYew component system. It sets up a best-practices Yew + Tailwind starter so you can focus on features, not configuration.

You get:

• Uses TailYew v0.1.43 (Yew 0.22 compatible) by default
• A ready-to-go Yew/WASM frontend with TailwindCSS (JIT mode)
• Live-reload via Trunk
• Dark mode + accessibility baked in
• Examples of atomic, composable UI via TailYew
• Smart Makefile for build, lint, and dev workflows
• Small bundle sizes and no JS dependencies (besides Tailwind tooling)
• See live TailYew demos »

🛠️ Installation

cargo install create-tailyew-app

Requires Rust 1.65+ and npm in your PATH.

🚀 Quick Start

create-tailyew-app <NAME> [--dest <BASE_DIR>]

• NAME — Your new project folder (required)
• --dest — (Optional) Output directory (default: .)

Example

rustup target add wasm32-unknown-unknown   # if not already installed
cargo install trunk                        # if not already installed

create-tailyew-app tailyew-app
cd tailyew-app
npm install                                # for tailwindcss cli
make run-frontend

This launches your dev server at http://localhost:9001.

📁 What’s Generated

<BASE_DIR>/<NAME>/
├─ frontend/
│  ├─ Cargo.toml           # Yew/WASM crate
│  ├─ tailwind.config.js   # TailwindCSS setup (pre-configured for TailYew)
│  ├─ src/                 # Rust app sources
│  ├─ static/              # HTML, safelist, assets, WASM pkg
│  ├─ Trunk.toml           # Trunk config (dev server/build)
│  ├─ index.html           # Trunk entry point
│  └─ Makefile             # Frontend build & serve tasks (Trunk + Tailwind)
├─ Makefile                # Root orchestrator (run-frontend, lint, format, etc)
└─ README.md               # This file

• Tailwind Safelist: static/tailyew-safelist.html is included for correct dark-mode & dynamic class extraction.
  • Refresh it after upgrading TailYew: from the project root run make fe-copy-tailyew-safelist (or inside frontend/ run make copy-tailyew-safelist).
• Live Reload: Hot-reloading for rapid dev (edit, save, reload).

⚡ Powered by TailYew

• 🌗 Dark mode ready with Tailwind’s dark: utilities
• 🧹 50+ components: Buttons, Inputs, Tables, Modals, Charts, Accordions, and more
• 📙 Markdown auto-renders to beautiful, theme-aware TailYew elements
• 📊 Charts (Bar, Line, Bubble, Pie, Scatter) — no JS required
• 📝 Composable Forms — with validation and accessibility
• 🦠 Pure Rust — no JS/TS needed for your UI
• 📦 Tiny WASM builds — thanks to Tailwind JIT and no-runtime bloat
• 📝 A11y: ARIA, labeling, and more

Explore live components: tailyew.com/demo/getting_started

🧪 Dogfooded in production
The TailYew demo site and documentation at tailyew.com are built entirely with TailYew itself. We actively dogfood the library to validate APIs, accessibility, and real-world usage as the system evolves.

🎬 Dev server

cd <BASE_DIR>/<NAME>
make run-frontend

• Watches Rust sources (frontend/src, frontend/static)
• Rebuilds WASM + Tailwind via Trunk pre-build hook, auto-reloads browser
• Serves locally at localhost:9001

🔧 Useful Makefile Targets

From your project root:

• **make help ** - in the generated project to see all available targets.
• make format — Format Rust sources
• make lint — Lint with Clippy
• make pretty — Format + Lint
• make run-frontend — Serve with hot-reload
• make fe-copy-tailyew-safelist — Refresh the TailYew safelist HTML from your local Cargo registry

❤️ Contributing

Help grow the Rust UI ecosystem:

1. Fork & clone this repo
2. Edit starter/app/ to change the template
3. Tweak CLI in src/
4. Run make pretty to format & lint
5. Open a PR — all feedback welcome!

📚 Helpful Links

• TailYew Docs & Demos
• Open a Pull Request
• Report a Bug
• Propose a Feature

🔗 Related Projects

• 🦠 Yew Framework
• 🎨 TailwindCSS