fix(curriculum): update CSS library and framework review page (#61872)

2026-05-28 18:26:54 +00:00 · 2025-08-25 12:57:25 +03:00
parent a068693cf4
commit ceadc376b1
1 changed files with 88 additions and 0 deletions
@@ -42,6 +42,94 @@ 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` `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.