GithubHelp home page GithubHelp logo

smir-ant / tauri_leptos_tailwind Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 225 KB

tailwind without node.js with leptos and tauri

Rust 70.91% CSS 22.10% HTML 4.83% JavaScript 2.16%
leptos tailwind tauri tauri2 template without-nodejs

tauri_leptos_tailwind's Introduction

Пара слов про стек:

  • Tauri - rust фреймворк для создания кроссплатформенных приложений
  • Leptos - фронтенд фреймворк, где у тебя rust вместо js
  • Tailwind - где-то между vanila css и bootstrap, хотя сам сперва не любил, но переобулся поработав с ним.



Как подтянуть Tailwind если вы не хотите node.js

https://tailwindcss.com/blog/standalone-cli

От него нам нужно только tailwind.config.js(его в корневую папку положить), если что.

Далее в css запихнуть это:

@tailwind base;
@tailwind components;
@tailwind utilities;

И в html вставить (обрати внимание, что это не стулещит):

<link data-trunk rel="tailwind-css" href="css/tailwind.css" />



Остальные отличия от стандартного шаблона tauri+leptos:

1) перенесен html из корневой папки в src:

https://stackoverflow.com/questions/76740053/in-yew-how-is-it-possible-to-locate-index-html-in-a-static-directory
добавлен hfref в html:

<link data-trunk rel="rust" data-wasm-opt="z" href="../Cargo.toml"/>

trunk.toml:

[build]
target = "./src/page.html"

2) css и assets(бывшая public) перенесены в папку src

3) ну и да, прикручен tailwind

Он при сборке формируется и оптимизируется, оказываясь потом в dist рядом с html+css+js+wasm. и подключается легко - за это leptos реал респект. Тут в примерах у них ещё с actix и axum есть.



p.s. сделал шаблон для себя, чтобы потом это не искать, но если понравилось/пригодилось, то звездочку хочу

делалось на бете tauri 2.0; версии видно в toml, дата = коммит

tauri_leptos_tailwind's People

Contributors

smir-ant avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.