Show page

Differences

This shows you the differences between two versions of the page.

--- se:labs:03 [2025/10/19 19:03]
ilie_cristian.sandu
+++ se:labs:03 [2025/10/19 20:34] (current)
ilie_cristian.sandu [Tasks]
@@ Line 400: / Line 400: @@
 ===== 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.
+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 React components.
+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).
+  * **Utility-First**: Tailwind provides small, single-purpose classes for styling (for example, `p-4` for padding or `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.
+  * **Customization**: You can customize or extend Tailwind's default configuration by adding your own color palettes, spacing, or typography.
-Examples:
 **Centering Text**
-To center-align text and add some padding, you can use the `**text-center**` and `**p-4**` utilities:
+To center-align text and add some padding in React, you can use the `text-center` and `p-4` utilities with `className`:
-<code html>
+<code javascript>
-<div class="text-center p-4">
+export default function CenteredText() {
-  <h1 class="text-xl font-bold">Hello, Tailwind CSS!</h1>
+  return (
-</div>
+    <div className="text-center p-4">
+      <h1 className="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:
+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>
+<code javascript>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+export default function ResponsiveGrid() {
-  <div class="bg-blue-200 p-4">Item 1</div>
+  return (
-  <div class="bg-blue-200 p-4">Item 2</div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-  <div class="bg-blue-200 p-4">Item 3</div>
+      <div className="bg-blue-200 p-4">Item 1</div>
-  <div class="bg-blue-200 p-4">Item 4</div>
+      <div className="bg-blue-200 p-4">Item 2</div>
-</div>
+      <div className="bg-blue-200 p-4">Item 3</div>
+      <div className="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:
+Tailwind allows you to create buttons with custom styles by combining multiple utility classes.
+In React, use `className` for the styling attribute:
-<code html>
+<code javascript>
-<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+export default function StyledButton() {
-  Click Me
+  return (
-</button>
+    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+      Click Me
+    </button>
+  );
+}
 </code>
+**More Examples**
+Tailwind also provides utilities for:
+  * **Text colors** – `text-red-500`, `text-gray-700`, `text-green-600`
+  * **Backgrounds** – `bg-blue-100`, `bg-yellow-200`
+  * **Spacing** – `m-4`, `p-2`, `px-6`
+  * **Flexbox and grid layouts** – `flex`, `items-center`, `justify-between`, `grid-cols-3`
+  * **Typography** – `font-bold`, `text-lg`, `tracking-wide`
+You can find the full list of utilities and examples in the official Tailwind CSS documentation:
+**[[https://tailwindcss.com/docs|https://tailwindcss.com/docs]]**
 ===== (Optional) Useful Resources for Modern React Development =====
@@ Line 569: / Line 597: @@
 ====== 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:
-  - 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
       - edit button that enable you to edit todo-item text

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/03.1760889797.txt.gz · Last modified: 2025/10/19 19:03 by ilie_cristian.sandu

Show page Old revisions

Media Manager Back to top