Update README.md (#520)

Started updating README. Now includes Tailwind guides and purpose.
NoroffFEU · Sep 27, 2024 · f214eff · f214eff
1 parent 07eb947
commit f214eff
Showing 1 changed file with 65 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,7 +1,41 @@
 # musikkforandrerliv.no
 
+![img_3078](https://github.com/NoroffFEU/musikkforandrerliv.no/assets/152280051/bc5bf665-65b6-49ed-a267-758b3fc21cb3)
+
+# Description:
+Noroff Frontend Developer students are building a web application for the non profit organization Musikk Forandrer Liv (MMF).
+
+This project aim to build a web application:
+- with multipple language support (English, Norwegian and Malagasy)
+- that allows people to support MMF via donations
+- that allows the client, MMF, to update and post content on their page via CMS
+- that allows people visiting the page to sign up for newsletter
+
+# Built with:
+- Tailwind
+- Live Server
+- Node.js
+
+# Getting started: 
+
+##Installation:
+
+1. Clone repo: https://github.com/NoroffFEU/musikkforandrerliv.no
+2. Install Tailwind (see intallation guide below)
+3. Install Decap (CMS)
+
+# Acknowledgments: 
+2022-2023 Noroff fulltime Frontend development students
+2023-2024 Noroff fulltime Frontend development students
+
+
+
+# Tailwind:
+Here you will find installation guide for Tailwind and how to use it.
 
 ## Tailwind guide
+- Use Tailwind CSS utility classes in your HTML to style your components
+
 - There should be a node modules file. if not run the following code in the terminal: **npm install**
 
 - If you are writing code and want it to update in the live server, remember to run the following code in terminal: **npm run dev**
@@ -10,4 +44,34 @@
 
 - plugins you can use to help with tailwind: **Tailwind CSS IntelliSense & Tailwind Docs**
 
-- If the tailwind code is not working, and you have tried the above, you can also look in the **Problems** tab and see if there are any issues there. 
+- If the tailwind code is not working, and you have tried the above, you can also look in the **Problems** tab and see if there are any issues there.
+
+## Tailwind installation guide
+Before you install Tailwind, make sure you have Node.js installed. You can download it from Node.js — Run JavaScript Everywhere (nodejs.org).
+For more detailed information and advanced configurations, refer to the official Tailwind CSS documentation. Installation - Tailwind CSS.
+
+1. Initialize Your Project
+    Create a new project directory and navigate into it.
+    Initialize a new npm project.
+
+2. Install Tailwind CSS via npm
+    Install Tailwind CSS along with its peer dependencies.
+
+3. Create Configuration Files
+    Generate the tailwind.config.js and postcss.config.js files.
+
+4. Configure Tailwind to Remove Unused Styles in Production
+    Configure the purge option in tailwind.config.js to remove unused styles in production.
+
+5. Create Your CSS File
+    Create a CSS file in your project and add the Tailwind directives.
+
+6. Include Tailwind in Your CSS
+    Update your postcss.config.js file to include Tailwind CSS.
+
+7. Build Your CSS
+    Add a script to your package.json to build your CSS.
+    Run the build script.
+
+8. Include the Generated CSS File in Your HTML
+    Include the generated CSS file in the <head> of your HTML file.