Merge branch 'master' into recipe-ui-add-style

Author: jwthomson

docs/v4-recipes/ui/add-feliz.md renamed to docs/recipes/ui/add-feliz.md

@@ -2,7 +2,7 @@
 [Feliz](https://github.com/Zaid-Ajaj/Feliz) is a wrapper for the base [React](https://reactjs.org/) DSL library that emphasises consistency, lightweight formatting, discoverable attributes and full type-safety. The default SAFE Template already uses Feliz.
 
 ### Using Feliz
-1. [Add Feliz to your project](./../package-management/add-nuget-package-to-client.md)
+1. [Add Feliz to your project](./../../v4-recipes//package-management/add-nuget-package-to-client.md)
 1. Start using Feliz in your code.
 
 ```fsharp

docs/recipes/ui/add-tailwind.md

@@ -0,0 +1,61 @@
+# How do I add Tailwind to a SAFE project?
+
+[Tailwind](https://tailwindcss.com/) is a utility-first CSS framework which can be composed to build any design, directly in your markup.
+
+As of SAFE version 5 (released in December 2023) it is included in the template by default so it can be used straight away.
+
+If you are are using the minimal template or if you are upgrading from an old version of SAFE, continue reading for installation instructions.
+
+1. [Add a stylesheet](https://safe-stack.github.io/docs/recipes/ui/add-style/) to the project
+
+1. Install the required npm packages
+    ```shell
+    npm install -D tailwindcss postcss autoprefixer
+    ```
+1. Initialise a `tailwind.config.js`
+    ```shell
+    npx tailwindcss init
+    ```
+1. Amend the `tailwind.config.js` as follows
+    ```javascript
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+      mode: "jit",
+      content: [
+        "./index.html",
+        "./**/*.{fs,js,ts,jsx,tsx}",
+      ],
+      theme: {
+        extend: {},
+      },
+      plugins: [],
+    }
+    ```
+
+1. Create a `postcss.config.js` with the following
+    ```javascript
+    module.exports = {
+      plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+      }
+    }
+    ```
+
+1. Add the Tailwind layers to your stylesheet
+    ```css
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ```
+
+1. In the `src/Client` folder find the code in `Index.fs` to show the list of todos and add a Tailwind text colour class(text-red-200)
+    ```fsharp
+    for todo in model.Todos do
+        Html.li [
+            prop.classes [ "text-red-200" ]
+            prop.text todo.Description
+        ]
+    ```
+
+You should see some nice red "to-do"s proving that Tailwind is now in your project.

docs/recipes/ui/cdn-to-npm.md

@@ -0,0 +1,22 @@
+# How do I migrate from a CDN stylesheet to an NPM package?
+Often, referencing a stylesheet from a CDN is all that's needed to add new styles but you can use an NPM package instead.
+---
+
+#### 1. Remove the CDN Reference
+Remove the CDN reference from the index template in `src/Client/index.html`:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+```
+
+#### 2. Add the NPM Package
+Add styles from NPM. [How do I add an NPM package to the client?](../../package-management/add-npm-package-to-client)  
+In this example we will add the [Bulma NPM package](https://www.npmjs.com/package/bulma).
+
+#### 3. Add a reference to your stylesheet
+1. Add a stylesheet to your project using [this recipe](../add-style). Add a scss file instead of a css file.
+1. Add the following lines to your scss file:
+    ```scss
+    // Set variables to affect Bulma styles
+    $body-color: #c6538c;
+    @import 'bulma/bulma.sass';
+    ```

mkdocs.yml

@@ -73,9 +73,12 @@ nav:
           - Remove FAKE: "recipes/build/remove-fake.md"
           - Package my SAFE app for deployment: "recipes/build/bundle-app.md"
       - UI:
+          - Add Tailwind support: "recipes/ui/add-tailwind.md"
           - Add daisyUI support: "recipes/ui/add-daisyui.md"
           - Add Stylesheet support: "recipes/ui/add-style.md"
+          - Add Feliz support: "recipes/ui/add-feliz.md"
           - Add FontAwesome support: "recipes/ui/add-fontawesome.md"
+          - Migrate from a CDN stylesheet to an NPM package: "recipes/ui/cdn-to-npm.md"
       - Storage:
           - Quickly add a database: "recipes/storage/use-litedb.md"
       - JavaScript:
@@ -139,7 +142,6 @@ nav:
           - Remove Bulma: "v4-recipes/ui/remove-bulma.md"
           - Add Tailwind support: "v4-recipes/ui/add-tailwind.md"
           - Add daisyUI support: "v4-recipes/ui/add-daisyui.md"
-          - Add Feliz support: "v4-recipes/ui/add-feliz.md"
           - Migrate from a CDN stylesheet to an NPM package: "v4-recipes/ui/cdn-to-npm.md"
           - Add routing with state shared between pages: "v4-recipes/ui/add-routing.md"
           - Add routing with separate models per page: "v4-recipes/ui/add-routing-with-separate-models.md"