Skip to content

Commit 97be0c9

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #307 from mukilan2815/main
Added Tailwindcss in the site
2 parents 85424f0 + 344682b commit 97be0c9

File tree

5 files changed

+137
-4
lines changed

5 files changed

+137
-4
lines changed

‎docs/tailwind/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Tailwind",
3+
"position": 8,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft."
7+
}
8+
}

‎docs/tailwind/getstart.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
id: getstart-tailwind
3+
title: Getting Started with Tailwind CSS
4+
sidebar_label: Getting Started
5+
sidebar_position: 2
6+
tags:
7+
- Tailwind CSS
8+
- Getting Started
9+
- Tailwind CSS Setup
10+
- Tailwind CSS Installation
11+
- Tailwind CSS Quickstart
12+
description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage.
13+
---
14+
15+
In this guide, we will walk through the steps required to get started with Tailwind CSS, from installation to basic usage.
16+
17+
## Installation
18+
19+
### Using npm
20+
21+
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/).
22+
23+
1. Initialize your project:
24+
25+
```bash
26+
npm init -y
27+
28+
```
29+
30+
2. Install Tailwind CSS via npm:
31+
32+
```bash
33+
npm install tailwindcss
34+
```
35+
36+
3. Generate a configuration file:
37+
38+
```bash
39+
npx tailwindcss init
40+
```
41+
42+
### Using CDN
43+
44+
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:
45+
46+
```bash
47+
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="
48+
```
49+
50+
Basic Usage
51+
Once you have Tailwind CSS installed, you can start using its utility classes in your HTML.
52+
53+
Example
54+
Here is a simple example of a responsive card using Tailwind CSS:
55+
56+
```bash
57+
<!DOCTYPE html>
58+
<html lang="en">
59+
<head>
60+
<meta charset="UTF-8">
61+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
62+
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
63+
<title>Tailwind CSS Card</title>
64+
</head>
65+
<body class="bg-gray-100">
66+
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-4">
67+
<div class="md:flex">
68+
<div class="md:flex-shrink-0">
69+
<img class="h-48 w-full object-cover md:w-48" src="/path/to/image.jpg" alt="An example image">
70+
</div>
71+
<div class="p-8">
72+
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Card title</div>
73+
<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>
74+
</div>
75+
</div>
76+
</div>
77+
</body>
78+
</html>
79+
```

‎docs/tailwind/intro-tailwind.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
id: intro-tailwind
3+
title: Introduction to Tailwind CSS
4+
sidebar_label: Introduction to Tailwind CSS
5+
sidebar_position: 1
6+
tags:
7+
- Tailwind CSS
8+
- Introduction to Tailwind CSS
9+
- Tailwind CSS Basics
10+
- Tailwind CSS Introduction
11+
- Tailwind CSS Overview
12+
- Tailwind CSS Tutorial
13+
- Tailwind CSS Guide
14+
- Tailwind CSS Getting Started
15+
- Tailwind CSS Introduction Tutorial
16+
- Tailwind CSS Introduction Guide
17+
- Tailwind CSS Introduction Getting Started
18+
- Tailwind CSS Introduction Overview
19+
- Tailwind CSS Introduction Basics
20+
- Tailwind CSS Introduction Basics Tutorial
21+
- Tailwind CSS Introduction Basics Guide
22+
- Tailwind CSS Introduction Basics Overview
23+
- Tailwind CSS Introduction Basics Getting Started
24+
- Tailwind CSS Introduction Basics Getting Started Tutorial
25+
- Tailwind CSS Introduction Basics Getting Started Guide
26+
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.
27+
---
28+
29+
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.
30+
31+
## What is Tailwind CSS?
32+
33+
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.
34+
35+
## Why use Tailwind CSS?
36+
37+
There are several reasons to use Tailwind CSS in your projects:
38+
39+
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.
40+
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.
41+
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.
42+
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.
43+
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.
44+
6. **Community and Ecosystem**: Tailwind CSS has a large and active community that provides support, plugins, and tools to enhance your development experience.

‎docusaurus.config.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ const config = {
7474
image: "img/nav-logo.jpg",
7575
announcementBar: {
7676
id: "announcementBar",
77-
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> ⭐️',
77+
content:
78+
'⭐️ 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> ⭐️',
7879
isCloseable: true,
7980
backgroundColor: "var(--ifm-color-primary)",
8081
},
@@ -110,6 +111,7 @@ const config = {
110111
<a href="/docs/category/typescript/" class="nav__icons"> <img src="/icons/ts.svg" alt="TypeScript" /> </a>
111112
<a href="/docs/category/python/" class="nav__icons"> <img src="/icons/py.svg" alt="Python" /> </a>
112113
<a href="/docs/category/java/" class="nav__icons"> <img src="/icons/java.svg" alt="Java" /> </a>
114+
<a href="/docs/category/tailwind/" class="nav__icons"> <img src="/icons/tailwind.png" alt="Tailwind" /> </a>
113115
</div>
114116
</div>`,
115117
},
@@ -152,7 +154,7 @@ const config = {
152154
<a href="/dsa-problems/" class="nav__icons"> Problems </a> <br />
153155
<a href="/dsa-solutions/" class="nav__icons"> Solutions </a>
154156
</div>
155-
</div>`,
157+
</div>`,
156158
},
157159
],
158160
},
@@ -540,7 +542,7 @@ const config = {
540542
showLastUpdateAuthor: true,
541543
showLastUpdateTime: true,
542544
},
543-
],
545+
],
544546
[
545547
path.join(__dirname, "/plugins/my-plugin"),
546548
{
@@ -552,4 +554,4 @@ const config = {
552554
],
553555
};
554556

555-
export default config;
557+
export default config;

‎static/icons/tailwind.png

1021 Bytes
Loading

0 commit comments

Comments
 (0)