+ +## 2. Sizing Icons (`w-`, `h-`, `text-`) + +The method for sizing depends on the icon type. + +| Icon Type | Sizing Utility | Example | +| :--- | :--- | :--- | +| **Icon Fonts & Emojis** | `font-size` utilities (`text-sm`, `text-xl`) | `` | +| **SVG** | `width` and `height` utilities (`w-`, `h-`) | `` | + +:::tip Sizing SVGs +Always use matching `w-{n}` and `h-{n}` utilities on SVGs (e.g., `w-6 h-6`) to ensure they are perfectly square and prevent distortion. +::: + +## 3. Coloring Icons (`text-` and `currentColor`) + +Coloring icons, especially SVGs, is made simple by using the `text-{color}` utilities and the CSS keyword `currentColor`. + +### A. `currentColor` for SVGs (Mandatory) + +For an inline SVG to inherit its color from the CSS `color` property (which is controlled by the `text-{color}` utility), the SVG's `fill` or `stroke` attributes **must** be set to `currentColor`. + +```html title="index.html" + + + +``` + +### B. Icon Fonts and Emojis + +These simply respond to the `color` property set by the `text-{color}` utility. + +```html title="index.html" + + +``` + +
+ +## 4. Vertical Alignment + +When an icon sits next to text (e.g., in a button or a menu item), ensuring the icon is perfectly centered vertically is crucial for a polished look. + +The easiest way is to use Flexbox or the `align-middle` utility. + +### A. Flexbox (Recommended) + +Wrap the text and the icon in a container and use `flex` and `items-center`. This is the most reliable method. + +```html title="index.html" + +``` + +### B. `align-middle` Utility + +If you cannot use Flexbox, the `align-middle` utility on the icon can often solve minor vertical misalignment issues, though it is less precise than Flexbox. + +```html title="index.html" +
+ + Task Complete +
+``` + ++ +## 5. Full Example: Styled Menu Items + +This example demonstrates sizing, coloring, and aligning icons within menu items using the Flexbox approach. + +
+
+
+
+
+
+```
+
+Application Menu
+ +
+
+
+
+
+
+
+
+ Analytics Dashboard
+
+
+
+
+
+
+
+
+ Pending Approvals
+
+
+
+
+
+
+ ⚙️
+
+ System Settings
+
+
+
+ + +## 1. Controlling Image Size and Responsiveness + +The most important aspect of image styling is ensuring they adapt to their container without stretching the layout. + +### A. Fluid Width (`w-full`) + +To make an image fully responsive, always ensure its width is fluid and its height is auto-calculated to maintain the aspect ratio. + +```html title="index.html" +
+
+ 
+
+```
+
+### B. Fixed Dimensions vs. Constraints
+
+While `w-full` is the standard, sometimes you need to enforce maximum or minimum sizes.
+
+| Utility | Description | Example |
+| :--- | :--- | :--- |
+| `max-w-xs` | Limits the maximum width (e.g., $20rem$) | `max-w-sm` |
+| `h-48` | Fixed height (e.g., $12rem$) | `w-48 h-48` |
+| `object-cover` | Essential for fixed-size containers (see Section 3). | `object-cover` |
+
++ +## 2. Aspect Ratios + +Managing the space an image occupies *before* it loads is vital to prevent **Cumulative Layout Shift (CLS)**. The modern way to handle this is using `aspect-ratio` utilities. + +These utilities set the height relative to the width, guaranteeing the container's shape. + +| Utility | Ratio | Calculation | +| :--- | :--- | :--- | +| `aspect-square` | $1:1$ | `aspect-ratio: 1 / 1;` | +| `aspect-video` | $16:9$ | `aspect-ratio: 16 / 9;` | +| `aspect-4/3` | $4:3$ | `aspect-ratio: 4 / 3;` | + +```html title="index.html" + +
+
+
+```
+
+## 3. Controlling Image Fit (`object-fit`)
+
+When an image is placed in a container with a fixed aspect ratio or fixed dimensions, the `object-fit` property determines how the image content fills the space.
+
+### A. `object-cover` (Crop and Fill)
+
+The image fills the entire container, potentially cropping off parts of the image to maintain its aspect ratio. **This is the most common and generally desired behavior for thumbnails and banners.**
+
+### B. `object-contain` (Shrink and Show All)
+
+The image is scaled down to fit entirely inside the container without cropping. Empty space (letterboxing) may appear on the sides.
+
+### C. `object-fill` (Stretch)
+
+The image is stretched to completely fill the container, regardless of its original aspect ratio. This can lead to distorted images.
+
+### Example
+
+```html title="index.html"
+
+ 
+
+
+Object Cover:
+ +
+
+
+```
+
+Object Contain:
+ ++ +## 4. Decorative Styling + +Utility classes make applying visual polish simple and consistent. + +| Utility | Property | Use Case | +| :--- | :--- | :--- | +| `rounded-full` | `border-radius: 9999px;` | Perfect circles for avatars/logos. | +| `shadow-xl` | `box-shadow` | Adding depth and lifting the image off the page. | +| `opacity-50` | `opacity` | Creating faded or watermark effects. | +| `grayscale` | `filter: grayscale(100%);` | Converting to black and white. | + +```html title="index.html" + +
- ` and `
- Item 1 +
- Item 2 +
- First step +
- Second step +
- Third step +
- `. If the list item wraps to a new line, the subsequent lines align underneath the marker.
+
+### B. `list-outside` (Default)
+
+The marker is placed **outside** the content flow. The list item's content is aligned underneath the start of the first line of text. This is typically preferred for better readability.
+
+```html title="index.html"
+
-
+
- + This list item has a long description that wraps onto a second line. + The text is aligned neatly below the start of the first line. + +
- + This item uses list-inside. The text on the second line will align + underneath the marker, causing a slightly jagged left margin. + +
- ` or `
- ` elements to space them out.
+
+```html title="index.html"
+
+```
+
+
+
+ +## 5. Full Example: Styled and Responsive Lists + +This example shows a responsive horizontal navigation bar and a standard vertical list. + +\ No newline at end of file diff --git a/docs/css/utilities/tables.mdx b/docs/css/utilities/tables.mdx index e345ed2..9160b42 100644 --- a/docs/css/utilities/tables.mdx +++ b/docs/css/utilities/tables.mdx @@ -1 +1,127 @@ - \ No newline at end of file +--- +title: "Tables and Data Display" +description: "Use utility classes to create responsive, visually appealing, and well-structured data tables, including striped rows, hover effects, and responsive scrolling." +keywords: [CSS tables, Tailwind tables, responsive tables, table styling, striped rows, data display] +tags: [CSS tables, Tailwind tables, responsive tables, table styling, striped rows, data display] +sidebar_label: Tables +--- + +Tables are essential for displaying structured, tabular data. While basic HTML tables are functional, they often require extensive styling to be readable, accessible, and responsive. + +By using utility classes, we can quickly build professional-grade tables that adapt gracefully to different screen sizes. + + +
+ +## 1. Basic Table Structure + +A well-styled table starts with a clear structure, using ``, ``, ``, ` `, and ` ` elements correctly. + +### Utility Classes for Structure + +| Class | Description | +| :--- | :--- | +| `w-full` | Ensures the table takes up the full width of its container. | +| `text-left` | Aligns text in header and data cells for better readability. | +| `table-auto` / `table-fixed` | Controls how the browser sets column widths. `table-auto` is the default. | + +```html title="index.html" + + + +
+``` + ++ + + + +Product + ++ + +Laptop X + ++
+ +## 2. Styling Rows and Cells + +Good table design involves consistent padding, clear dividers, and legible text styles. + +### A. Cell Padding and Text + +Use padding utilities (`p-`, `px-`, `py-`) and font utilities (`text-`, `font-`) on the `` and ` ` tags. + +```html title="index.html" + + Sales + ++ $12,500 + +``` + +### B. Striped Rows (Zebra Stripes) + +Alternating row colors dramatically improves readability, especially for wide tables. Use the pseudo-class utility `odd:` or `even:` on the `` element. + +```html title="index.html" + + ++ + +Data A ++ + +``` + +### C. Hover Effects + +Adding a hover effect provides visual feedback, which is crucial for interactive tables. + +```html title="index.html" + +Data B ++ + +``` + +Hover over me! ++
+ +## 3. Responsive Tables + +The biggest challenge with tables is displaying them on small screens. The best technique for wide tables is to allow them to scroll horizontally while keeping the rest of the page layout fixed. + +### The `overflow-x-auto` Wrapper + +Wrap the entire table in a container with the `overflow-x-auto` utility. This tells the browser to create a horizontal scrollbar only for the table area if its content is too wide. + +```html title="index.html" +++``` + +:::tip Keep Text Together +For tables that are allowed to scroll, it's often useful to prevent text inside the cells from wrapping to a new line by adding the `whitespace-nowrap` utility to the `+ + +
+` element. This ensures each row stays on a single line, preserving the table's structure. +::: + +## 4. Full Example: Responsive Styled Table + +This complete example combines styling and responsiveness using utility classes. + +
\ No newline at end of file
- ` container.
+3. Use spacing utilities (`gap-`, `mx-`) on the `
- `) are fundamental HTML elements used for displaying structured content. In modern web design, they are commonly used not just for bullet points, but also as the basis for navigation menus, cards, and data summaries.
+
+Utility classes allow us to easily manage marker styles, positioning, and convert vertical lists into flexible, horizontal layouts.
+
+
+ +## 1. Removing Default List Styling + +By default, browsers apply left padding and markers (bullets for `
- `, numbers for `
- `). When creating navigation menus or complex custom components, you often need to strip these default styles entirely.
+
+The `list-none` utility class removes the markers and the default padding/margin applied by the browser.
+
+```html title="index.html"
+
-
+
- ` or `
- ` |
+| `list-decimal` | Numbers (1., 2., 3., etc.). | `
- ` or `
- ` |
+| `list-square` | Square bullets (less common). | `
- ` or `
- ` |
+
+```html title="index.html"
+
-
+
- ` or `
- `) to make space for the markers, as the marker utilities only control the *type*, not the *spacing*.
+:::
+
+
+ +## 3. Positioning the Marker (`list-inside`, `list-outside`) + +The `list-style-position` property controls where the marker (bullet or number) appears relative to the list item's content. + +### A. `list-inside` + +The marker is placed **inside** the content flow of the `