From bca5fbd9a366686f5964a5e3fde87bbf77843ecc Mon Sep 17 00:00:00 2001
From: Jaz Thomson <jaz@compositional-it.com>
Date: Fri, 15 Dec 2023 16:10:45 +0000
Subject: [PATCH] Update "add-tailwind" recipe for SAFE v5

---
 docs/recipes/ui/add-tailwind.md | 61 +++++++++++++++++++++++++++++++++
 mkdocs.yml                      |  1 +
 2 files changed, 62 insertions(+)
 create mode 100644 docs/recipes/ui/add-tailwind.md

diff --git a/docs/recipes/ui/add-tailwind.md b/docs/recipes/ui/add-tailwind.md
new file mode 100644
index 00000000..ad30a6ba
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 11e4bbb4..92f449c4 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -73,6 +73,7 @@ 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 FontAwesome support: "recipes/ui/add-fontawesome.md"
       - Storage: