Merge pull request #343 from Larocceau/remove-tailwind

add recipe for removing tailwind

Author: mattgallagher92

docs/recipes/ui/remove-tailwind.md

@@ -0,0 +1,26 @@
+By default, a full SAFE-stack application uses Tailwind CSS for styling. You might not always want to manage your styling using Tailwind, for example because you want to use a CSS framework like [Bulma](https://bulma.io/). In this recipe we describe how to fully remove Tailwind
+
+## 1. Remove Tailwind css classes 
+
+Tailwind uses classes to style UI elements. In `src/Client`, search for all occurrences of `prop.className` and `prop.classes` and remove them if they are used for Tailwind support. In a vanilla SAFE template installation, this means removing **all** occurrences of `prop.className`.
+
+
+## 2. Uninstall NPM packages
+
+Remove NPM packages that were installed for Tailwind using
+
+```
+ npm uninstall tailwindcss postcss autoprefixer
+```
+
+## 3. Remove configuration files
+
+Remove the following files:
+
+```
+src/Client/postcss.config.js
+src/Client/tailwind.config.js
+src/Client/index.css
+```
+
+Your SAFE Stack app is now Tailwind-free.

mkdocs.yml

@@ -84,6 +84,7 @@ nav:
 
       - UI:
           - Add Tailwind support: "recipes/ui/add-tailwind.md"
+          - Remove Tailwind support: "recipes/ui/remove-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"