From a090d19c3bc8a516edcca41b30d0923e240014cf Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Tue, 2 Dec 2025 19:55:33 +0530 Subject: [PATCH] added utilities code --- docs/css/utilities/icons.mdx | 221 +++++++++++++++++++++++++++++++++- docs/css/utilities/images.mdx | 128 +++++++++++++++++++- docs/css/utilities/lists.mdx | 111 ++++++++++++++++- docs/css/utilities/tables.mdx | 128 +++++++++++++++++++- 4 files changed, 584 insertions(+), 4 deletions(-) diff --git a/docs/css/utilities/icons.mdx b/docs/css/utilities/icons.mdx index e345ed2..5e8dbf3 100644 --- a/docs/css/utilities/icons.mdx +++ b/docs/css/utilities/icons.mdx @@ -1 +1,220 @@ - \ No newline at end of file +--- +title: "Icon Styling with Utility Classes" +description: "Learn how to manage the size, color, and alignment of icons (SVG, Font Icons, and Emojis) using utility-first CSS principles." +keywords: [CSS icons, SVG styling, Font Awesome utilities, icon sizing, icon color, alignment, utility classes] +tags: [CSS icons, SVG styling, Font Awesome utilities, icon sizing, icon color, alignment, utility classes] +sidebar_label: Icons +--- + +Icons are essential for navigation, user feedback, and enhancing the visual language of an application. Regardless of the type of icon you use—whether it's an SVG, a font library icon, or even an emoji—utility classes provide a consistent way to control their appearance. + +The primary styling concerns for icons are: + +1. **Size:** Ensuring they are legible but not oversized. +2. **Color:** Matching them to the current design context. +3. **Alignment:** Positioning them correctly next to text. + + +
+ +## 1. Icon Types and Implementation + +There are three common ways to include icons in your project, each with a slightly different styling approach. + +### A. Icon Font Libraries (e.g., Font Awesome) + +These libraries use specific classes on an element (usually `` or ``) to display an icon glyph. + + * **Styling:** Controlled entirely by font properties (e.g., `font-size` for size, `color` for color). + + ```html title="index.html" + + + ``` + +### B. Inline SVG + +SVG (Scalable Vector Graphics) is the modern standard. It is inserted directly into the HTML markup. + + * **Styling:** Controlled by size utilities and text utilities. The `currentColor` keyword is crucial here (see Section 2). + + ```html title="index.html" + + + + + ``` + +### C. Emojis + +Emojis are simple, accessible, and fast, treated as standard text characters. + + * **Styling:** Controlled entirely by text properties. + + ```html title="index.html" + + 🚀 + ``` + + +
+ +## 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. + + + + +```html + + + + + + Icon Styling Demo + + + + + + + + +
+ +

Application Menu

+ +
+ + + + + + + + + + Analytics Dashboard + + + + + + + + + Pending Approvals + + + + + + + ⚙️ + + System Settings + + +
+
+ + + +``` + + + + + + + + + +In this example, each menu item uses a different icon type, all styled consistently with Tailwind CSS utility classes for size, color, and alignment. You can easily swap out icons or adjust their styles by modifying the utility classes. \ No newline at end of file diff --git a/docs/css/utilities/images.mdx b/docs/css/utilities/images.mdx index e345ed2..2319b14 100644 --- a/docs/css/utilities/images.mdx +++ b/docs/css/utilities/images.mdx @@ -1 +1,127 @@ - \ No newline at end of file +--- +title: "Image Styling and Optimization" +description: "Use utility classes to control image dimensions, responsiveness, aspect ratios, fit behavior, and decorative effects like rounded corners and shadows." +keywords: [CSS images, Tailwind images, image responsiveness, aspect ratio, object-fit, image optimization, rounded corners, object-position] +tags: [CSS images, Tailwind images, image responsiveness, aspect ratio, object-fit, image optimization, rounded corners, object-position] +sidebar_label: Images +--- + +Images are critical components of any webpage, but they pose challenges related to responsiveness, performance, and layout. Utility classes simplify the process of making images look great and behave predictably across all devices. + +This guide focuses on controlling image size, shape, and behavior using utility-first CSS principles. + + +
+ +## 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" +
+ + Responsive image +
+``` + +### 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" + +
+ 4:3 photo +
+``` + +## 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 cover example +
+ +
+

Object Contain:

+ + Object contain example +
+``` + + +
+ +## 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" + +User Avatar +``` + +## 5. Full Example: Image Gallery + +This example shows a responsive grid of images using aspect ratios, object-fit, and decorative effects. + + \ No newline at end of file diff --git a/docs/css/utilities/lists.mdx b/docs/css/utilities/lists.mdx index e345ed2..6e589a1 100644 --- a/docs/css/utilities/lists.mdx +++ b/docs/css/utilities/lists.mdx @@ -1 +1,110 @@ - \ No newline at end of file +--- +title: "Lists and List Styling" +description: "Learn how to use utility classes to control list appearance, including removing default markers, changing marker types, positioning, and creating horizontal navigation layouts." +keywords: [CSS lists, Tailwind lists, list-style-type, list-style-position, horizontal list, navigation bar, list-none] +tags: [CSS lists, Tailwind lists, list-style-type, list-style-position, horizontal list, navigation bar, list-none] +qsidebar_label: Lists +--- + +Lists (`
    ` and `
      `) 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" +
            +
          • Item 1
            • +
          • Item 2
            • +
          +``` + +## 2. Controlling Marker Type (`list-disc`, `list-decimal`) + +Tailwind provides utilities to explicitly set the marker type, which is useful when you want to enforce a style or change an ordered list to use bullets, or vice versa. + +| Utility | Description | HTML Element | +| :--- | :--- | :--- | +| `list-disc` | Standard bullets (filled circles). | `
            ` or `
              ` | +| `list-decimal` | Numbers (1., 2., 3., etc.). | `
                ` or `
                  ` | +| `list-square` | Square bullets (less common). | `
                    ` or `
                      ` | + +```html title="index.html" +
                        +
                      1. First step
                        2. +
                      2. Second step
                        3. +
                      3. Third step
                        4. +
                      +``` + +:::tip Default Margin/Padding +When setting marker types, you still need to apply padding (e.g., `pl-6`) to the list container (`
                        ` 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 `
                        1. `. 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. +
                            • +
                          +``` + +## 4. Creating Horizontal Lists (Navigation) + +Converting a standard vertical list into a horizontal navigation bar is a common use case. This is achieved using Flexbox utilities, often combined with `list-none`. + +### Steps: + +1. Use `list-none` to strip default styles. +2. Apply Flexbox (`flex`) to the `
                            ` or `
                              ` container. +3. Use spacing utilities (`gap-`, `mx-`) on the `
                            1. ` 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 + + + + Data B + + +``` + +### C. Hover Effects + +Adding a hover effect provides visual feedback, which is crucial for interactive tables. + +```html title="index.html" + + + 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