From 92015b62c377dad0b3a0715fa3ee34fa899c7f8e Mon Sep 17 00:00:00 2001
From: Niyati Raiyani <niyati4201@gmail.com>
Date: Sun, 31 Aug 2025 15:03:14 +0530
Subject: [PATCH] fix(curriculum): add Tailwind CSS section to FE Libs chapter
 review (#61946)

---
 .../6724e2dbf723fe1c8883cc69.md               | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/curriculum/challenges/english/blocks/review-front-end-libraries/6724e2dbf723fe1c8883cc69.md b/curriculum/challenges/english/blocks/review-front-end-libraries/6724e2dbf723fe1c8883cc69.md
index cfebc5a6fb8..29f30ab4788 100644
--- a/curriculum/challenges/english/blocks/review-front-end-libraries/6724e2dbf723fe1c8883cc69.md
+++ b/curriculum/challenges/english/blocks/review-front-end-libraries/6724e2dbf723fe1c8883cc69.md
@@ -1147,6 +1147,99 @@ Here is an example of using Bootstrap to create a list group. Instead of applyin
 </div>
 ```
 
+## Tailwind CSS
+
+Tailwind is a utility-first CSS framework. Instead of writing custom CSS rules, you build your designs by combining small utility classes directly in your HTML.
+
+### Responsive Design Utilities
+
+Tailwind uses prefixes such as `sm:`, `md:`, and `lg:` to apply styles at different screen sizes.
+
+```html
+<div class="w-full md:w-1/2 lg:flex-row">
+  Responsive layout
+</div>
+```
+
+### Flexbox Utilities
+
+Classes like `flex`, `flex-col`, `justify-around`, and `items-center` make it easy to create flexible layouts.
+
+```html
+<div class="flex flex-col md:flex-row justify-around items-center">
+  <p>Column on small screens</p>
+  <p>Row on medium and larger screens</p>
+</div>
+```
+
+### Grid Utilities
+
+Tailwind includes utilities for CSS Grid, like `grid`, `grid-cols-1`, and `md:grid-cols-3`.
+
+```html
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+  <div class="bg-gray-100 p-4">Column 1</div>
+  <div class="bg-gray-100 p-4">Column 2</div>
+  <div class="bg-gray-100 p-4">Column 3</div>
+</div>
+```
+
+### Spacing Utilities
+
+Utilities like `mt-8`, `mx-auto`, `p-4`, and `gap-4` help create consistent spacing without writing CSS.
+
+```html
+<div class="mt-8 p-4 bg-indigo-600 text-white">
+  Spaced content
+</div>
+```
+
+### Typography Utilities
+
+Utilities like `uppercase`, `font-bold`, `font-semibold`, and `text-4xl` control text appearance.
+
+You can set font sizes that adjust at breakpoints, such as `text-3xl` and `md:text-5xl`.
+
+```html
+<h1 class="text-3xl md:text-5xl font-semibold text-center">
+  Responsive Heading
+</h1>
+```
+
+### Colors and Hover States
+
+Tailwind provides a wide color palette, such as `text-red-700`, `bg-indigo-600`, and `bg-gray-100`.
+
+Classes like `hover:bg-pink-600` make interactive effects simple.
+
+```html
+<a href="#" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md">
+  Hover Me
+</a>
+```
+
+### Borders, Rings, and Effects
+
+- **Borders**: `border-2 border-red-300` adds borders with specified thickness and colors.
+- **Rings**: `ring-1 ring-gray-300` creates outline-like effects often used for focus or cards.
+- **Rounded corners and scaling**: Classes like `rounded-md`, `rounded-xl`, and `scale-105` add polish.
+
+```html
+<div class="p-6 rounded-xl ring-2 ring-fuchsia-500 scale-105">
+  Highlighted card
+</div>
+```
+
+### Gradients
+
+Tailwind supports gradient utilities like `bg-gradient-to-r from-fuchsia-500 to-indigo-600`.
+
+```html
+<div class="p-4 text-white bg-gradient-to-r from-fuchsia-500 to-indigo-600">
+  Gradient background
+</div>
+```
+
 ## CSS Preprocessors
 
 - **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects.