Differences
This shows you the differences between two versions of the page.
|
se:labs:03 [2025/10/19 19:10] ilie_cristian.sandu [Tailwind CSS] |
se:labs:03 [2025/10/19 20:34] (current) ilie_cristian.sandu [Tasks] |
||
|---|---|---|---|
| Line 409: | Line 409: | ||
| * **Customization**: You can customize or extend Tailwind's default configuration by adding your own color palettes, spacing, or typography. | * **Customization**: You can customize or extend Tailwind's default configuration by adding your own color palettes, spacing, or typography. | ||
| - | {{:se:labs:tailwind_logo.png?400|}} | ||
| - | === Centering Text === | + | **Centering Text** |
| To center-align text and add some padding in React, you can use the `text-center` and `p-4` utilities with `className`: | To center-align text and add some padding in React, you can use the `text-center` and `p-4` utilities with `className`: | ||
| Line 425: | Line 424: | ||
| </code> | </code> | ||
| - | === Responsive Layout === | + | **Responsive Layout** |
| With Tailwind, you can easily create responsive layouts using its responsive utilities. | With Tailwind, you can easily create responsive layouts using its responsive utilities. | ||
| Line 443: | Line 442: | ||
| </code> | </code> | ||
| - | === Button Styling === | + | **Button Styling** |
| Tailwind allows you to create buttons with custom styles by combining multiple utility classes. | Tailwind allows you to create buttons with custom styles by combining multiple utility classes. | ||
| Line 458: | Line 457: | ||
| </code> | </code> | ||
| - | === More Examples === | + | **More Examples** |
| Tailwind also provides utilities for: | Tailwind also provides utilities for: | ||
| Line 598: | Line 597: | ||
| ====== Tasks ====== | ====== Tasks ====== | ||
| - | - Download the generated project {{:se:labs:se-lab3-tasks.zip|}} (and run `npm install` and `npm start`) | + | - Download the generated project {{:se:labs:se-lab3-tasks.zip|}} (and run **npm install** and **npm run dev**) |
| - Create a to do list app: | - Create a to do list app: | ||
| - | - Implement the List component in `components/ToDoList.tsx` | + | - Implement the List component in **components/ToDoList.tsx** |
| - | - Create a new component in `components/` that will represent __a todo-list item__ that should have: | + | - Create a new component in **components/** that will represent __a todo-list item__ that should have: |
| - 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 | ||
