From dba165af9ada23aff0e7e172206040f55b668411 Mon Sep 17 00:00:00 2001 From: Florian RICHER Date: Wed, 8 Mar 2023 21:22:39 +0100 Subject: [PATCH] Add tailwindcss + set to LF --- .idea/vcs.xml | 1 - README.md | 6 +++++- Trunk.toml | 8 ++++++++ index.css | 3 +++ index.html | 4 +++- index.scss | 35 ----------------------------------- src/app.rs | 7 +------ src/components/test.rs | 2 +- tailwind.config.js | 8 ++++++++ 9 files changed, 29 insertions(+), 45 deletions(-) create mode 100644 Trunk.toml create mode 100644 index.css delete mode 100644 index.scss create mode 100644 tailwind.config.js diff --git a/.idea/vcs.xml b/.idea/vcs.xml index b80c2ec..35eb1dd 100644 --- a/.idea/vcs.xml +++ b/.idea/vcs.xml @@ -2,6 +2,5 @@ - \ No newline at end of file diff --git a/README.md b/README.md index 9437e09..4aa975a 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,10 @@ Simply run the following command to install it: cargo install trunk wasm-bindgen-cli ``` +```bash +npm i -g tailwindcss +``` + That's it, we're done! ### Running @@ -55,7 +59,7 @@ There are a few things you have to adjust when adopting this template. ### Remove example code The code in [src/main.rs](src/main.rs) specific to the example is limited to only the `view` method. -There is, however, a fair bit of Sass in [index.scss](index.scss) you can remove. +There is, however, a fair bit of Sass in [index.scss](index.css) you can remove. ### Update metadata diff --git a/Trunk.toml b/Trunk.toml new file mode 100644 index 0000000..7c7a3fe --- /dev/null +++ b/Trunk.toml @@ -0,0 +1,8 @@ +[build] +target = "index.html" +dist = "dist" + +[[hooks]] +stage = "build" +command = "sh" +command_arguments = ["-c", "npx tailwindcss -i index.css -o $TRUNK_STAGING_DIR/tailwind.css --minify"] \ No newline at end of file diff --git a/index.css b/index.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/index.html b/index.html index 4d13cf1..91114d2 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ Trunk Template - + + + diff --git a/index.scss b/index.scss deleted file mode 100644 index 710545f..0000000 --- a/index.scss +++ /dev/null @@ -1,35 +0,0 @@ -html, -body { - height: 100%; - margin: 0; -} - -body { - align-items: center; - display: flex; - justify-content: center; - - background: linear-gradient(to bottom right, #444444, #009a5b); - font-size: 1.5rem; -} - -main { - color: #fff6d5; - font-family: sans-serif; - text-align: center; -} - -.logo { - height: 20em; -} - -.heart:after { - content: "❤️"; - - font-size: 1.75em; -} - -h1 + .subtitle { - display: block; - margin-top: -1em; -} diff --git a/src/app.rs b/src/app.rs index ab70eb7..6b1c39b 100644 --- a/src/app.rs +++ b/src/app.rs @@ -3,11 +3,6 @@ use yew::prelude::*; #[function_component(App)] pub fn app() -> Html { html! { -
- -

{ "Hello World!!" }

- { "from Yew with " } - -
+ } } diff --git a/src/components/test.rs b/src/components/test.rs index 5d26414..9054246 100644 --- a/src/components/test.rs +++ b/src/components/test.rs @@ -3,7 +3,7 @@ use yew::{function_component, Html, html}; #[function_component] pub fn Test() -> Html { html! { -
+

{"Test component"}

} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..c2355e2 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.rs', './index.html'], + theme: { + extend: {}, + }, + plugins: [], +}