Differences
This shows you the differences between two versions of the page.
|
se:labs:03 [2024/10/28 18:58] ilie_cristian.sandu [Tasks] |
se:labs:03 [2024/11/01 19:07] (current) cosmin.dumitrache [Lab 03 - Introduction to React] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Lab 03 - Introduction to React ====== | + | ====== Lab 03 - Frontend ====== |
| =====React==== | =====React==== | ||
| Line 245: | Line 245: | ||
| + | ===== Tailwind CSS ===== | ||
| + | |||
| + | Tailwind CSS is a utility-first CSS framework that allows you to build custom designs quickly and efficiently. Unlike traditional CSS frameworks, which come with predefined components, Tailwind provides low-level utility classes for controlling layout, color, spacing, typography, and more, directly in your HTML. This approach gives you more flexibility without writing custom CSS. | ||
| + | |||
| + | Some key concepts of Tailwind CSS: | ||
| + | * **Utility-First**: Tailwind provides small, single-purpose classes for styling (e.g., `**p-4**` for padding, `**text-center**` for text alignment). | ||
| + | * **Responsive Design**: Tailwind has built-in support for responsive design, enabling you to style elements differently based on screen size. | ||
| + | * **Customization**: You can customize or extend Tailwind's default configuration, adding your own color palettes, spacing, and more. | ||
| + | Examples: | ||
| + | |||
| + | **Centering Text** | ||
| + | |||
| + | To center-align text and add some padding, you can use the `**text-center**` and `**p-4**` utilities: | ||
| + | |||
| + | <code html> | ||
| + | <div class="text-center p-4"> | ||
| + | <h1 class="text-xl font-bold">Hello, Tailwind CSS!</h1> | ||
| + | </div> | ||
| + | </code> | ||
| + | |||
| + | **Responsive Layout** | ||
| + | |||
| + | With Tailwind, you can easily create responsive layouts using its responsive utilities. For instance, to set different column layouts on different screen sizes, you might do: | ||
| + | |||
| + | <code html> | ||
| + | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | ||
| + | <div class="bg-blue-200 p-4">Item 1</div> | ||
| + | <div class="bg-blue-200 p-4">Item 2</div> | ||
| + | <div class="bg-blue-200 p-4">Item 3</div> | ||
| + | <div class="bg-blue-200 p-4">Item 4</div> | ||
| + | </div> | ||
| + | </code> | ||
| + | |||
| + | **Button Styling** | ||
| + | |||
| + | Tailwind allows you to create buttons with custom styles by combining utility classes: | ||
| + | |||
| + | <code html> | ||
| + | <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> | ||
| + | Click Me | ||
| + | </button> | ||
| + | </code> | ||
| - | |||
| Line 257: | Line 298: | ||
| - text showing the description of the todo-list item | - text showing the description of the todo-list item | ||
| - edit button that enable you to edit todo-item text | - edit button that enable you to edit todo-item text | ||
| + | - checkbox that enable you to check todo-item text | ||
| - cancel button that enable you to **cancel** a edit action | - cancel button that enable you to **cancel** a edit action | ||
| - delete button that emits an event to parent to remove the item | - delete button that emits an event to parent to remove the item | ||
