From c1a3aa42a10bc9731692aab32ecbdbde4ada7ddf Mon Sep 17 00:00:00 2001 From: Joost Date: Wed, 27 Dec 2023 15:15:41 +0000 Subject: [PATCH 1/3] add recipe for removing tailwind --- docs/recipes/ui/remove-tailwind.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/recipes/ui/remove-tailwind.md diff --git a/docs/recipes/ui/remove-tailwind.md b/docs/recipes/ui/remove-tailwind.md new file mode 100644 index 00000000..fb9bb87d --- /dev/null +++ b/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 occurances 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 is now tailwind-free. \ No newline at end of file From 569b4d9abb4e6b41c5101e7491fc2898ff75af7b Mon Sep 17 00:00:00 2001 From: Joost Date: Wed, 27 Dec 2023 15:20:45 +0000 Subject: [PATCH 2/3] add to mkdocs.yml --- mkdocs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/mkdocs.yml b/mkdocs.yml index c12a1d86..f226772a 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -81,6 +81,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" From ca346134a6de4f5a9286c86a72f2c6e25a573f0a Mon Sep 17 00:00:00 2001 From: Joost Kaptein Date: Tue, 2 Jan 2024 12:32:43 +0000 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Matt Gallagher <46973220+mattgallagher92@users.noreply.github.com> --- docs/recipes/ui/remove-tailwind.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/recipes/ui/remove-tailwind.md b/docs/recipes/ui/remove-tailwind.md index fb9bb87d..e826d377 100644 --- a/docs/recipes/ui/remove-tailwind.md +++ b/docs/recipes/ui/remove-tailwind.md @@ -2,12 +2,12 @@ By default, a full SAFE-stack application uses Tailwind CSS for styling. You mig ## 1. Remove Tailwind css classes -Tailwind uses classes to style UI elements. In `src/Client`, search for all occurances 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`. +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 +Remove NPM packages that were installed for Tailwind using ``` npm uninstall tailwindcss postcss autoprefixer @@ -23,4 +23,4 @@ src/Client/tailwind.config.js src/Client/index.css ``` -Your SAFE is now tailwind-free. \ No newline at end of file +Your SAFE Stack app is now Tailwind-free. \ No newline at end of file