Merge pull request #2 from CodeHarborHub/main

changes
Ayushmaanagarwal1211 · May 31, 2024 · 72a00ab · 72a00ab
2 parents e0d540b + 09bd17b
commit 72a00ab
Show file tree

Hide file tree

Showing 9 changed files with 1,526 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -89,7 +89,7 @@ This project is licensed under the [MIT License](LICENSE).
 
 ## Contributors
 
-![Contributors](https://opencollective.com/codeharborhub/contributors.svg)
+[![Contributors](https://contributors-img.web.app/image?repo=codeharborhub/codeharborhub)](https://github.com/CodeHarborHub/codeharborhub/graphs/contributors)
 
 ## Chat with us
 

diff --git a/docs/tailwind/_category_.json b/docs/tailwind/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Tailwind",
+  "position": 8,
+  "link": {
+    "type": "generated-index",
+    "description": "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft."
+  }
+}
diff --git a/docs/tailwind/getstart.md b/docs/tailwind/getstart.md
@@ -0,0 +1,79 @@
+---
+id: getstart-tailwind
+title: Getting Started with Tailwind CSS
+sidebar_label: Getting Started
+sidebar_position: 2
+tags:
+  - Tailwind CSS
+  - Getting Started
+  - Tailwind CSS Setup
+  - Tailwind CSS Installation
+  - Tailwind CSS Quickstart
+description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage.
+---
+
+In this guide, we will walk through the steps required to get started with Tailwind CSS, from installation to basic usage.
+
+## Installation
+
+### Using npm
+
+The recommended way to install Tailwind CSS is via npm. If you don't have npm installed, you can download and install it from [npm's official website](https://www.npmjs.com/).
+
+1. Initialize your project:
+
+   ```bash
+   npm init -y
+
+   ```
+
+2. Install Tailwind CSS via npm:
+
+```bash
+npm install tailwindcss
+```
+
+3. Generate a configuration file:
+
+```bash
+npx tailwindcss init
+```
+
+### Using CDN
+
+If you prefer not to use npm, you can include Tailwind CSS directly from a CDN. Add the following ` <link>` tag to the ` <head>` of your HTML file:
+
+```bash
+<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="
+```
+
+Basic Usage
+Once you have Tailwind CSS installed, you can start using its utility classes in your HTML.
+
+Example
+Here is a simple example of a responsive card using Tailwind CSS:
+
+```bash
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <title>Tailwind CSS Card</title>
+</head>
+<body class="bg-gray-100">
+  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-4">
+    <div class="md:flex">
+      <div class="md:flex-shrink-0">
+        <img class="h-48 w-full object-cover md:w-48" src="/path/to/image.jpg" alt="An example image">
+      </div>
+      <div class="p-8">
+        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Card title</div>
+        <p class="mt-2 text-gray-500">This is an example of a card using Tailwind CSS. You can replace this text with your own.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
diff --git a/docs/tailwind/intro-tailwind.md b/docs/tailwind/intro-tailwind.md
@@ -0,0 +1,44 @@
+---
+id: intro-tailwind
+title: Introduction to Tailwind CSS
+sidebar_label: Introduction to Tailwind CSS
+sidebar_position: 1
+tags:
+  - Tailwind CSS
+  - Introduction to Tailwind CSS
+  - Tailwind CSS Basics
+  - Tailwind CSS Introduction
+  - Tailwind CSS Overview
+  - Tailwind CSS Tutorial
+  - Tailwind CSS Guide
+  - Tailwind CSS Getting Started
+  - Tailwind CSS Introduction Tutorial
+  - Tailwind CSS Introduction Guide
+  - Tailwind CSS Introduction Getting Started
+  - Tailwind CSS Introduction Overview
+  - Tailwind CSS Introduction Basics
+  - Tailwind CSS Introduction Basics Tutorial
+  - Tailwind CSS Introduction Basics Guide
+  - Tailwind CSS Introduction Basics Overview
+  - Tailwind CSS Introduction Basics Getting Started
+  - Tailwind CSS Introduction Basics Getting Started Tutorial
+  - Tailwind CSS Introduction Basics Getting Started Guide
+description: Tailwind CSS is a utility-first CSS framework that allows developers to build custom designs quickly. This guide provides an introduction to Tailwind CSS.
+---
+
+In this tutorial, we will learn about Tailwind CSS, a utility-first CSS framework that allows developers to build custom designs quickly and efficiently. Tailwind CSS provides a set of predefined classes that can be composed to build any design directly in your HTML.
+
+## What is Tailwind CSS?
+
+Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. It is designed to be used directly in your HTML by applying utility classes to elements.
+
+## Why use Tailwind CSS?
+
+There are several reasons to use Tailwind CSS in your projects:
+
+1. **Utility-First**: Tailwind CSS provides a wide range of utility classes that allow you to apply styles directly in your HTML. This approach makes it easy to create custom designs without writing custom CSS.
+2. **Customization**: Tailwind CSS is highly customizable. You can configure it to match your design system and create your own utility classes using the configuration file.
+3. **Responsive Design**: Tailwind CSS makes it easy to create responsive designs using responsive utility variants. You can apply different styles at different breakpoints directly in your HTML.
+4. **Consistency**: Using utility classes helps maintain consistency across your project. It ensures that the same styles are applied in the same way, reducing the risk of visual inconsistencies.
+5. **Productivity**: Tailwind CSS can significantly speed up your development process by allowing you to build complex designs quickly. You can avoid context-switching between your HTML and CSS files and make changes directly in your HTML.
+6. **Community and Ecosystem**: Tailwind CSS has a large and active community that provides support, plugins, and tools to enhance your development experience.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -74,7 +74,8 @@ const config = {
       image: "img/nav-logo.jpg",
       announcementBar: {
         id: "announcementBar",
-        content: '⭐️ If you like CodeHarborHub, give it a star on <a target="_blank" href="https://github.com/codeharborhub/codeharborhub">GitHub</a> and join us on <a target="_blank" href="https://www.linkedin.com/company/codeharborhub/">LinkedIn</a> ⭐️',
+        content:
+          '⭐️ If you like CodeHarborHub, give it a star on <a target="_blank" href="https://github.com/codeharborhub/codeharborhub">GitHub</a> and join us on <a target="_blank" href="https://www.linkedin.com/company/codeharborhub/">LinkedIn</a> ⭐️',
         isCloseable: true,
         backgroundColor: "var(--ifm-color-primary)",
       },
@@ -110,6 +111,7 @@ const config = {
                   <a href="/docs/category/typescript/" class="nav__icons"> <img src="/icons/ts.svg" alt="TypeScript" /> </a>                  
                   <a href="/docs/category/python/" class="nav__icons"> <img src="/icons/py.svg" alt="Python" /> </a>                  
                   <a href="/docs/category/java/" class="nav__icons"> <img src="/icons/java.svg" alt="Java" /> </a>                  
+                  <a href="/docs/category/tailwind/" class="nav__icons"> <img src="/icons/tailwind.png" alt="Tailwind" /> </a>                  
                 </div>
               </div>`,
               },
@@ -152,7 +154,7 @@ const config = {
                   <a href="/dsa-problems/" class="nav__icons"> Problems </a> <br />
                   <a href="/dsa-solutions/" class="nav__icons"> Solutions </a>
                 </div>
-              </div>`,          
+              </div>`,
               },
             ],
           },
@@ -540,7 +542,7 @@ const config = {
         showLastUpdateAuthor: true,
         showLastUpdateTime: true,
       },
-    ],    
+    ],
     [
       path.join(__dirname, "/plugins/my-plugin"),
       {
@@ -552,4 +554,4 @@ const config = {
   ],
 };
 
-export default config;
+export default config;