create-tailyew-app

A zero-config starter template for building Rust frontends with Yew + Tailwind CSS, powered by the TailYew component system.

---

✨ What is this?

This is a scaffold app for TailYew, accessible, and fully typed UI component library built with Yew and styled using Tailwind. This project provides:

• 🔥 Instant setup with Yew 0.21 and Tailwind CSS
• 🧱 Example components and pages
• 🚀 Production-ready file structure
• 🧠 Designed around Atomic Design

---

📦 System Requirements

You'll need the following tools installed:

• Rust + wasm-pack
• cargo-watch — for hot reloading
• npm — for local development to server FE and build tailwind css

Install example:

cargo install wasm-pack cargo-watch
npm install install
brew install binaryen

🚀 Quickstart

# Clone the scaffold
git clone https://github.com/tailyew/create-tailyew-app
cd create-tailyew-app

cargo build

# install tailwindcss cli and server
npm i

# Start the dev server with hot reloads
make hot-run

Visit: http://localhost:8080

---

---

🧩 Using TailYew Components

To use TailYew components in your Yew project:

1. Add the dependency:

cargo add tailyew

2. Import and use components:

use tailyew::atoms::Button;

html! {
    <Button label="Click me!" />
}

3. Tailwind classes are auto-applied via the included tailwind.config.js and main.css. Custom theme colors and fonts are already configured.

---

📁 Project Structure

├── src/
│   ├── pages/           # Landing + NotFound pages
│   ├── templates/       # Layout components (e.g., NavBar)
│   ├── lib.rs           # App entry point + routing
│   └── app_router.rs    # Main router with layout shell
├── static/
│   └── index.html       # Entrypoint HTML with service worker
│   └── pkg/             # wasm build
├── main.css             # Tailwind setup + custom themes
├── tailwind.config.js   # Design tokens and scan paths
├── Cargo.toml           # Rust + wasm config
└── Makefile             # Dev commands (build, run, lint)

---

📦 Built With

• Yew — Rust-based web framework (WASM)
• TailYew — Reusable component system
• Tailwind CSS — Utility-first styling
• wasm-bindgen — Interop between Rust and JS

---

🤝 Contributing

We welcome contributions! Here's how you can get involved:

• Open issues for bugs or ideas
• Suggest new components or improvements
• Submit a PR (component demos, docs, DX tools, etc.)

This template is part of the TailYew ecosystem. Contributions to TailYew itself are also appreciated.

---

📄 License

• MIT License