Start components

rust-on-nails.com/content/.spelling

@@ -258,6 +258,8 @@ SCSS
 WebComponent
  - docs/full-stack-web/styling.md
 90
+Justfile
+stylesheet
  - docs/full-stack-web/htmx.md
 HTMX
 110
@@ -272,3 +274,6 @@ npm
 dist
 SCSS
 WebComponent
+ - docs/full-stack-web/component-library.md
+DaisyUI
+RSX

rust-on-nails.com/content/docs/full-stack-web/component-library.md

@@ -13,7 +13,8 @@ toc = true
 top = false
 +++
 
+One of the main benefits of React is that you can construct user interfaces from components. We can do exactly the same with Dioxus. We'll use a pre-designed set of components called [DaisyUI](https://daisyui.com/) which gives most things we will need i.e. Buttons, Tabs etc.
 
-[Coming Soon]
+And we can use [Daisy RSX](https://github.com/bionic-gpt/daisy-rsx/) which is a crate that gives us a wrapper around the Daisy components in RSX.
 
 

rust-on-nails.com/content/docs/full-stack-web/styling.md

@@ -13,4 +13,40 @@ toc = true
 top = false
 +++
 
-[Coming Soon]
+You may have guessed by now if you looked at the layout we created that we're going to use [Tailwind](https://tailwindcss.com/) for styling.
+
+We'll add this to our `web-assets` folder and then to our layout. We have pre-installed [tailwind-extra](https://github.com/dobicinaitis/tailwind-cli-extra) so we can use tailwind without creating an npm pipeline.
+
+## Adding Tailwind
+
+```sh
+cd crates/web-assets
+tailwind-extra init
+```
+This will create a `tailwind.config.js` file.
+
+We also need to create a `input.css` file.
+
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Watching Tailwind
+
+Add the following to your ´Justfile´
+
+```justfile
+tailwind:
+    cd /workspace/crates/web-assets && tailwind-extra -i ./input.css -o ./dist/tailwind.css --watch
+```
+
+Now we can run 
+
+```sh
+just tailwind
+```
+
+The stylesheet will be compiled.