florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add tailwindcss + set to LF

Browse source
This commit is contained in:
Florian RICHER 2023-03-08 21:22:39 +01:00
parent 6c6521ef32
commit dba165af9a
9 changed files with 29 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.idea/vcs.xml
View file

@ -2,6 +2,5 @@
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
<mapping directory="$PROJECT_DIR$/portfolio" vcs="Git" />
</component>
</project>

6
README.md
View file

@ -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

8
Trunk.toml Normal file
View file

@ -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"]

3
index.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

4
index.html
View file

@ -3,6 +3,8 @@
<head>
<meta charset="utf-8" />
<title>Trunk Template</title>
<link data-trunk rel="sass" href="index.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/tailwind.css"/>
<base data-trunk-public-url/>
</head>
</html>

35
index.scss
View file

@ -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;
}

7
src/app.rs
View file

@ -3,11 +3,6 @@ use yew::prelude::*;
#[function_component(App)]
pub fn app() -> Html {
html! {
<main>
<img class="logo" src="https://yew.rs/img/logo.png" alt="Yew logo" />
<h1>{ "Hello World!!" }</h1>
<span class="subtitle">{ "from Yew with " }<i class="heart" /></span>
<super::components::Test></super::components::Test>
</main>
<super::components::Test></super::components::Test>
}
}

2
src/components/test.rs
View file

@ -3,7 +3,7 @@ use yew::{function_component, Html, html};
#[function_component]
pub fn Test() -> Html {
html! {
<div>
<div class="bg-red-500">
<h1>{"Test component"}</h1>
</div>
}

8
tailwind.config.js Normal file
View file

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.rs', './index.html'],
theme: {
extend: {},
},
plugins: [],
}