Name

``` -------------------------------- ### Configure PostCSS for Tailwind CSS Source: https://tailwindcss.com/docs/installation/framework-guides/nextjs Create a `postcss.config.mjs` file in the project root and add the `@tailwindcss/postcss` plugin. ```javascript const config = { plugins: { "@tailwindcss/postcss": {}, },};export default config; ``` -------------------------------- ### Configure PostCSS with Tailwind plugin Source: https://tailwindcss.com/docs/installation/framework-guides/angular Create a .postcssrc.json configuration file in the project root to register the @tailwindcss/postcss plugin. ```json { "plugins": { "@tailwindcss/postcss": {} }} ``` -------------------------------- ### Import CSS in Layout Source: https://tailwindcss.com/docs/installation/framework-guides/sveltekit Import the global stylesheet into the root layout component to apply styles application-wide. ```svelte {@render children()} ``` -------------------------------- ### Basic container query usage Source: https://tailwindcss.com/docs/responsive-design Define a container with @container and style children based on its width using mobile-first variants like @md. ```html

``` -------------------------------- ### Tailwind CSS Conflicting Utility Classes Example Source: https://tailwindcss.com/docs/styling-with-utility-classes Illustrates how Tailwind CSS resolves conflicts when two utility classes target the same CSS property. The class appearing later in the stylesheet takes precedence. ```html

``` ```css .flex { display: flex;}.grid { display: grid;} ``` -------------------------------- ### Basic positioning with top, right, bottom, left utilities Source: https://tailwindcss.com/docs/top-right-bottom-left Use top-, right-, bottom-, left-, and inset- utilities to position absolutely positioned elements. Apply to elements with position: absolute within a relative parent. ```html

``` -------------------------------- ### flex-auto for growing and shrinking with initial size Source: https://tailwindcss.com/docs/flex Use flex-auto to allow a flex item to grow and shrink while respecting its initial size. Combines growth capability with size awareness. ```html

``` -------------------------------- ### Responsive transform-style utilities Source: https://tailwindcss.com/docs/transform-style Apply different transform-style behaviors at specific breakpoints using variants like md:. ```html

``` -------------------------------- ### Apply Responsive mask-origin Utilities Source: https://tailwindcss.com/docs/mask-origin Prefix `mask-origin` utilities with a breakpoint variant to apply them conditionally based on screen size. ```html

``` -------------------------------- ### Responsive backdrop contrast with breakpoint variants Source: https://tailwindcss.com/docs/backdrop-filter-contrast Prefix backdrop-contrast utilities with breakpoint variants like md: to apply different contrast values at specific screen sizes. ```html

``` -------------------------------- ### Responsive filter utilities Source: https://tailwindcss.com/docs/filter Use breakpoint prefixes like md: to apply or remove filter utilities at specific screen sizes. ```html

``` -------------------------------- ### Responsive flex utility with breakpoint variant Source: https://tailwindcss.com/docs/flex Prefix flex utilities with breakpoint variants like md: to apply different flex behavior at specific screen sizes. Enables responsive layouts that adapt to viewport width. ```html

``` -------------------------------- ### Apply Flex Wrap Utilities Responsively with Tailwind CSS Source: https://tailwindcss.com/docs/flex-wrap Prefix a `flex-wrap` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### Apply Scroll Margin with Tailwind CSS Source: https://tailwindcss.com/docs/scroll-margin Use `scroll-ml-` and `scroll-mt-` utilities to set the scroll offset for items within a snap container. This example demonstrates horizontal snapping with a left margin. ```html

``` -------------------------------- ### Responsive content with breakpoint variants Source: https://tailwindcss.com/docs/content Prefix content utilities with breakpoint variants like md: to apply different content at different screen sizes. ```html

``` -------------------------------- ### Apply minimum height responsively Source: https://tailwindcss.com/docs/min-height Use breakpoint variants like md: to change minimum height at specific screen sizes. ```html

``` -------------------------------- ### Use custom column values Source: https://tailwindcss.com/docs/columns Use columns-[] syntax for arbitrary custom values, or columns-() for CSS custom properties. ```html

``` ```html

``` -------------------------------- ### Use default auto select behavior with select-auto Source: https://tailwindcss.com/docs/user-select Use the `select-auto` utility to use the default browser behavior for selecting text. ```html

The quick brown fox jumps over the lazy dog.

``` -------------------------------- ### Apply responsive grid column utilities in HTML Source: https://tailwindcss.com/docs/grid-column Use breakpoint variants like `md:` to apply `grid-column` utilities conditionally based on screen size. ```html

``` -------------------------------- ### Responsive aspect ratio with breakpoint variants Source: https://tailwindcss.com/docs/aspect-ratio Combine aspect-ratio utilities with breakpoint prefixes like md: to apply different ratios at different screen sizes. ```html ``` -------------------------------- ### Set Percentage-Based Width with Tailwind CSS Source: https://tailwindcss.com/docs/width Apply `w-full` or `w-` utilities to give an element a width based on percentages. ```html

w-1/2

w-2/5

w-3/5

w-1/3

w-2/3

w-1/4

w-3/4

w-1/5

w-4/5

w-1/6

w-5/6

w-full

``` -------------------------------- ### Explicitly exclude classes in Tailwind CSS Source: https://tailwindcss.com/docs/detecting-classes-in-source-files Use @source not inline() to prevent specific classes from being generated, even if detected in source files. This example excludes red background utilities with hover and focus variants. ```CSS @import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}"); ``` -------------------------------- ### Responsive text decoration thickness with breakpoint variants Source: https://tailwindcss.com/docs/text-decoration-thickness Apply text decoration thickness only at specific screen sizes using breakpoint prefixes like md:. Requires responsive variant support. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Apply Basic Background Position Utilities Source: https://tailwindcss.com/docs/background-position Use predefined utility classes to control the position of an element's background image. ```html

``` -------------------------------- ### Get Resolved Tailwind CSS Variable Values in JavaScript Source: https://tailwindcss.com/docs/theme Use `getComputedStyle` on the document root to retrieve the resolved value of a Tailwind CSS theme variable. This is useful when you need the computed pixel or unit value. ```JavaScript let styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue("--shadow-xl"); ``` -------------------------------- ### Apply align-self responsively Source: https://tailwindcss.com/docs/align-self Use breakpoint variants like md: to apply align-self utilities at specific screen sizes. ```html

``` -------------------------------- ### Container scale min-width Source: https://tailwindcss.com/docs/min-width Apply fixed minimum widths using container scale utilities like min-w-sm, min-w-md, and min-w-lg for consistent sizing across responsive breakpoints. ```html

min-w-lg

min-w-md

min-w-sm

min-w-xs

min-w-2xs

min-w-3xs

``` -------------------------------- ### Apply responsive mask-position utilities Source: https://tailwindcss.com/docs/mask-position Use breakpoint variants like `md:` to apply mask-position utilities conditionally based on screen size. ```html

``` -------------------------------- ### Apply Responsive Opacity in Tailwind CSS Source: https://tailwindcss.com/docs/opacity Prefix an `opacity` utility with a breakpoint variant like `md:` to apply opacity at specific screen sizes. ```html ``` -------------------------------- ### Responsive max-block-size with breakpoint Source: https://tailwindcss.com/docs/max-block-size Prefix max-block-size utilities with breakpoint variants like md: to apply different maximum block sizes at different screen sizes. ```HTML

``` -------------------------------- ### Using logical properties for text direction Source: https://tailwindcss.com/docs/top-right-bottom-left Use inset-s- and inset-e- utilities to set inset-inline-start and inset-inline-end, which automatically adapt to left-to-right or right-to-left text direction. ```html

``` -------------------------------- ### Responsive object-fit with breakpoint variants Source: https://tailwindcss.com/docs/object-fit Prefix object-fit utilities with breakpoint variants like md: to apply different sizing behavior at specific screen sizes. ```HTML

``` -------------------------------- ### Use Tailwind Utility Classes in Qwik Component Source: https://tailwindcss.com/docs/installation/framework-guides/qwik Apply Tailwind CSS utility classes to HTML elements in your Qwik components using the class attribute. This example demonstrates basic text styling with Tailwind utilities. ```typescript import { component$ } from '@builder.io/qwik' export default component$(() => { return (

Hello World!

) }) ``` -------------------------------- ### --spacing() function in arbitrary values Source: https://tailwindcss.com/docs/functions-and-directives Use --spacing() within calc() expressions in arbitrary Tailwind utility values for precise spacing calculations. ```HTML

``` -------------------------------- ### Detecting Classes in JSX Components Source: https://tailwindcss.com/docs/detecting-classes-in-source-files Tailwind scans source files as plain text, identifying potential class name tokens. This example shows a component where class names are directly present within a `colors` object. ```JSX export function Button({ color, children }) { const colors = { black: "bg-black text-white", blue: "bg-blue-500 text-white", white: "bg-white text-black", }; return ( );} ``` -------------------------------- ### Responsive position utilities with Tailwind CSS Source: https://tailwindcss.com/docs/position Prefix a position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### Responsive flex-direction with breakpoint variants Source: https://tailwindcss.com/docs/flex-direction Apply flex-direction utilities conditionally at different screen sizes using breakpoint prefixes like md:. ```html

``` -------------------------------- ### Basic usage of color-scheme utilities Source: https://tailwindcss.com/docs/color-scheme Apply scheme-light, scheme-dark, or scheme-light-dark to control the rendering of native UI elements like date inputs. ```html

``` -------------------------------- ### Apply responsive background-size with Tailwind CSS Source: https://tailwindcss.com/docs/background-size Prefix a `background-size` utility with a breakpoint variant to apply it only at specific screen sizes and above. ```html

``` -------------------------------- ### Apply responsive box shadow with breakpoint variant Source: https://tailwindcss.com/docs/box-shadow Prefix box-shadow utilities with breakpoint variants like md: to apply the utility only at specific screen sizes and above. ```HTML

``` -------------------------------- ### Arbitrary Peer Selector with Custom Class in Tailwind CSS Source: https://tailwindcss.com/docs/hover-focus-and-other-states Use arbitrary values in `peer-*` variants to define custom selectors. This example demonstrates styling a message based on a combination of a custom class (`.is-dirty`) and a `peer-required` state. ```html ``` -------------------------------- ### Applying accent color responsively Source: https://tailwindcss.com/docs/accent-color Prefix an `accent-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above. ```html ``` -------------------------------- ### justify-content Utility Reference Source: https://tailwindcss.com/docs/justify-content A complete list of justify-content utility classes and their corresponding CSS properties for flex and grid layouts. ```APIDOC ## justify-content\n\n### Description\nUtilities for controlling how flex and grid items are positioned along a container's main axis.\n\n### Request Example\n```html\n

\n```\n\n### Response\n#### Success Response (200)\n- **justify-start** (string) - justify-content: flex-start;\n- **justify-end** (string) - justify-content: flex-end;\n- **justify-end-safe** (string) - justify-content: safe flex-end;\n- **justify-center** (string) - justify-content: center;\n- **justify-center-safe** (string) - justify-content: safe center;\n- **justify-between** (string) - justify-content: space-between;\n- **justify-around** (string) - justify-content: space-around;\n- **justify-evenly** (string) - justify-content: space-evenly;\n- **justify-stretch** (string) - justify-content: stretch;\n- **justify-baseline** (string) - justify-content: baseline;\n- **justify-normal** (string) - justify-content: normal; ``` -------------------------------- ### Responsive break-before variants Source: https://tailwindcss.com/docs/break-before Apply break-before utilities at specific breakpoints by prefixing the class with a variant like md:. ```html

``` -------------------------------- ### Apply Responsive Minimum Inline Size Source: https://tailwindcss.com/docs/min-inline-size Prefix `min-inline-size` utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

``` -------------------------------- ### Styling an Element Based on Sibling Invalid State with Tailwind CSS Source: https://tailwindcss.com/docs/hover-focus-and-other-states Mark a sibling element with the `peer` class to enable styling of a target element using `peer-*` variants. This example demonstrates how to show a validation message when an email input is invalid. ```html ``` -------------------------------- ### Apply max-inline-size responsively Source: https://tailwindcss.com/docs/max-inline-size Use breakpoint prefixes like md: to change the maximum inline size at different screen widths. ```html

``` -------------------------------- ### Apply Responsive Backdrop Filters Source: https://tailwindcss.com/docs/backdrop-filter Prefix a backdrop-filter utility with a breakpoint variant like md: to apply the filter only at specific screen sizes and above. ```html

``` -------------------------------- ### Responsive positioning with breakpoint variants Source: https://tailwindcss.com/docs/top-right-bottom-left Prefix position utilities with breakpoint variants like md: to apply positioning only at specific screen sizes and above. ```html

``` -------------------------------- ### Set percentage-based height using Tailwind CSS Source: https://tailwindcss.com/docs/height Use h-full or h- utilities for relative height sizing. ```html

h-full

h-9/10

h-3/4

h-1/2

h-1/3

``` -------------------------------- ### place-items Utility Classes Reference Source: https://tailwindcss.com/docs/place-items Complete reference of all available place-items utility classes and their corresponding CSS output. These utilities control how items are justified and aligned at the same time in grid and flexbox layouts. ```APIDOC ## place-items Utility Classes ### Description Utilities for controlling how items are justified and aligned at the same time in flexbox and grid layouts. ### Available Classes | Class | CSS Output | |-------|------------| | `place-items-start` | `place-items: start;` | | `place-items-end` | `place-items: end;` | | `place-items-end-safe` | `place-items: safe end;` | | `place-items-center` | `place-items: center;` | | `place-items-center-safe` | `place-items: safe center;` | | `place-items-baseline` | `place-items: baseline;` | | `place-items-stretch` | `place-items: stretch;` | ### Usage Apply any of these classes directly to a grid or flexbox container element to control item alignment on both axes. ``` -------------------------------- ### Responsive justify-content Source: https://tailwindcss.com/docs/justify-content Applying justify-content utilities conditionally at different breakpoints using variant prefixes. ```APIDOC ## [breakpoint]:justify-[value]\n\n### Description\nPrefix a justify-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above.\n\n### Request Example\n```html\n

\n \n

\n``` ``` -------------------------------- ### Use custom and CSS variable outline widths Source: https://tailwindcss.com/docs/outline-width Use square brackets for arbitrary values or the length shorthand for CSS variables. ```html

``` ```html

``` -------------------------------- ### Configure PostCSS for Tailwind Source: https://tailwindcss.com/docs/installation/framework-guides/meteor Create a PostCSS configuration file in the project root and register the @tailwindcss/postcss plugin. ```javascript export default { plugins: { "@tailwindcss/postcss": {}, }, }; ``` -------------------------------- ### Responsive box-sizing variants Source: https://tailwindcss.com/docs/box-sizing Apply box-sizing utilities conditionally at different screen sizes using breakpoint variants like md:. ```html

``` -------------------------------- ### Set columns by width Source: https://tailwindcss.com/docs/columns Use columns-xs, columns-sm, and similar utilities to set ideal column width; the number of columns automatically adjusts to prevent columns from becoming too narrow. ```html

``` -------------------------------- ### Use custom values and CSS variables for contrast Source: https://tailwindcss.com/docs/filter-contrast Apply arbitrary contrast values using bracket notation or reference CSS variables with the parenthesis shorthand. ```html

``` ```html

``` -------------------------------- ### Use contents utility in HTML Source: https://tailwindcss.com/docs/display Use the `contents` utility to create a "phantom" container whose children act like direct children of the parent. ```html

``` -------------------------------- ### Responsive columns design Source: https://tailwindcss.com/docs/columns Prefix columns utilities with breakpoint variants like sm: to apply different column layouts at different screen sizes. ```html

``` -------------------------------- ### Use custom inset shadow utility in markup Source: https://tailwindcss.com/docs/box-shadow Apply a custom inset shadow utility defined in the theme configuration. ```HTML

``` -------------------------------- ### Basic perspective-origin in HTML Source: https://tailwindcss.com/docs/perspective-origin Use utility classes like `perspective-origin-top-left` and `perspective-origin-bottom-right` to control the vanishing point of a perspective. ```html

``` -------------------------------- ### Responsive Design: perspective-origin Source: https://tailwindcss.com/docs/perspective-origin Apply perspective-origin utilities at different breakpoints using responsive variants. ```APIDOC ## CSS Utility {variant}:perspective-origin ### Description Prefix a perspective-origin utility with a breakpoint variant like md: to only apply the utility at specific screen sizes. ### Method CSS Class Variant ### Endpoint .{variant}:perspective-origin-{value} ### Parameters #### Path Parameters - **variant** (string) - Required - Breakpoint prefix (sm, md, lg, xl, 2xl) ### Request Example

### Response #### Success Response (200) - **CSS Media Query** (string) - The CSS rule wrapped in a media query for the specified breakpoint. #### Response Example @media (min-width: 768px) { .md\:perspective-origin-bottom-left { perspective-origin: bottom left; } } ``` -------------------------------- ### Apply Responsive Minimum Block Size with Tailwind CSS Breakpoints Source: https://tailwindcss.com/docs/min-block-size Prefix `min-block-size` utilities with breakpoint variants like `md:` to apply them conditionally based on screen size, enabling responsive layouts. ```html

``` -------------------------------- ### Control stacking context with isolation utilities Source: https://tailwindcss.com/docs/isolation Use the isolate utility to force a new stacking context or isolation-auto to revert to default behavior. ```html

``` -------------------------------- ### Apply blur filters responsively Source: https://tailwindcss.com/docs/filter-blur Prefix blur utilities with breakpoint variants to apply filters at specific screen sizes. ```html

``` -------------------------------- ### Responsive stroke-width with breakpoint variants Source: https://tailwindcss.com/docs/stroke-width Apply different stroke widths at different screen sizes using breakpoint prefixes like md:. ```html

``` -------------------------------- ### Basic backdrop contrast with standard utilities Source: https://tailwindcss.com/docs/backdrop-filter-contrast Apply backdrop contrast filters using predefined utility classes like backdrop-contrast-50 and backdrop-contrast-200 to control an element's backdrop contrast effect. ```html

``` -------------------------------- ### Responsive transition property with breakpoint variant Source: https://tailwindcss.com/docs/transition-property Prefix transition utilities with breakpoint variants like md: to apply them conditionally at specific screen sizes. Enables different transition behavior across responsive breakpoints. ```HTML ``` -------------------------------- ### Update outline width and style in HTML Source: https://tailwindcss.com/docs/upgrade-guide The outline utility now defaults to 1px width and solid style. ```HTML ``` -------------------------------- ### Basic text decoration thickness with numeric utilities Source: https://tailwindcss.com/docs/text-decoration-thickness Apply predefined text decoration thickness using decoration- classes. Combine with underline or other text decoration utilities. ```html

The quick brown fox...

``` -------------------------------- ### Applying responsive appearance utilities in Tailwind CSS Source: https://tailwindcss.com/docs/appearance Prefix an `appearance` utility with a breakpoint variant like `md:` to apply the utility only at medium screen sizes and above. ```html ``` -------------------------------- ### Blue Inset Shadow Utilities Source: https://tailwindcss.com/docs/box-shadow Utilities for setting the inset shadow color to various shades of blue. ```css --tw-inset-shadow-color: var(--color-blue-50); /* oklch(97% 0.014 254.604) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */ ``` ```css --tw-inset-shadow-color: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */ ``` -------------------------------- ### Responsive Scroll Padding with Breakpoints Source: https://tailwindcss.com/docs/scroll-padding Apply scroll padding utilities conditionally at different screen sizes using breakpoint variants like md:. ```HTML

``` -------------------------------- ### Apply Responsive Cursor Styles with Tailwind CSS Source: https://tailwindcss.com/docs/cursor Prefix cursor utilities with breakpoint variants like `md:` to apply different cursor styles based on screen size. ```html ``` -------------------------------- ### Theme Customization: --ease-* Source: https://tailwindcss.com/docs/transition-timing-function Extend or override the default easing curves by defining custom theme variables in the @theme block. ```APIDOC ## @theme { --ease-* } ### Description Define custom easing curves in your CSS theme block to create reusable utility classes. ### Method Theme Configuration ### Endpoint --ease-{name} ### Parameters #### Theme Variables - **--ease-{name}** (string) - Required - The easing curve definition (e.g., cubic-bezier). ### Request Example @theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); } ### Response Example ``` -------------------------------- ### Apply responsive outline offset Source: https://tailwindcss.com/docs/outline-offset Use breakpoint variants like md: to conditionally apply outline offset utilities at different screen sizes. ```html

``` -------------------------------- ### Apply solid inset rings to elements with Tailwind CSS Source: https://tailwindcss.com/docs/box-shadow Use `inset-ring` or `inset-ring-` utilities like `inset-ring-2` and `inset-ring-4` to apply a solid inset box-shadow ring. ```html ``` -------------------------------- ### Responsive flex-grow with breakpoint variant Source: https://tailwindcss.com/docs/flex-grow Prefix flex-grow utilities with breakpoint variants like md: to apply the utility only at specific screen sizes. ```html

``` -------------------------------- ### Set minimum height using spacing scale Source: https://tailwindcss.com/docs/min-height Use numeric utilities to set a fixed minimum height based on the project's spacing scale. ```html

min-h-80

min-h-64

min-h-48

min-h-40

min-h-32

min-h-24

``` -------------------------------- ### Basic transition with hover effects Source: https://tailwindcss.com/docs/transition-property Apply transition and transform utilities to animate multiple properties on hover. The transition class enables smooth color and transform changes with default timing. ```HTML ``` -------------------------------- ### Use custom drop shadow utility in markup Source: https://tailwindcss.com/docs/filter-drop-shadow Apply the custom drop-shadow-3xl utility class defined in the theme configuration. ```html ``` -------------------------------- ### Responsive grid-auto-flow Source: https://tailwindcss.com/docs/grid-auto-flow Apply grid-auto-flow utilities conditionally at different breakpoints. ```html

``` -------------------------------- ### Use custom shadow utility in markup Source: https://tailwindcss.com/docs/box-shadow Apply a custom shadow utility defined in the theme configuration. ```HTML

``` -------------------------------- ### Responsive perspective-origin in HTML Source: https://tailwindcss.com/docs/perspective-origin Apply different perspective origin utilities at specific breakpoints using responsive variants like `md:`. ```html

``` -------------------------------- ### mask-size Responsive Design Source: https://tailwindcss.com/docs/mask-size Apply mask-size utilities responsively by prefixing with breakpoint variants to control mask sizing at different screen sizes. ```APIDOC ## Responsive Design with mask-size ### Breakpoint Variant Syntax Prefix any `mask-size` utility with a breakpoint variant to apply it only at specific screen sizes: ```html

``` ### How It Works - `mask-auto` applies at all screen sizes (default) - `md:mask-contain` applies only at medium screen sizes and above - Variants override previous values at their breakpoint ### Available Breakpoint Prefixes - `sm:` - Small screens and up - `md:` - Medium screens and up - `lg:` - Large screens and up - `xl:` - Extra large screens and up - `2xl:` - 2X large screens and up ### Example Patterns ```html

``` ### Reference For more information about using variants, see the variants documentation. ``` -------------------------------- ### Basic Backdrop Grayscale Application Source: https://tailwindcss.com/docs/backdrop-filter-grayscale Use utilities like backdrop-grayscale-0, backdrop-grayscale-50, and backdrop-grayscale to control the grayscale effect applied to an element's backdrop. ```html

``` -------------------------------- ### Responsive brightness filter with breakpoint variant Source: https://tailwindcss.com/docs/filter-brightness Combine brightness utilities with breakpoint variants like md: to apply different brightness levels at specific screen sizes. ```html

``` -------------------------------- ### Custom backdrop sepia value with arbitrary syntax Source: https://tailwindcss.com/docs/backdrop-filter-sepia Set backdrop sepia to a custom value using the bracket notation syntax when preset values don't match your design needs. ```html

``` -------------------------------- ### Sky Inset Shadow Utilities Source: https://tailwindcss.com/docs/box-shadow Utilities for setting the inset shadow color to various shades of sky blue. ```css --tw-inset-shadow-color: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */ ``` ```css --tw-inset-shadow-color: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */ ``` -------------------------------- ### Apply responsive outline widths Source: https://tailwindcss.com/docs/outline-width Use breakpoint variants like 'md:' to change the outline width at specific screen sizes. ```html

``` -------------------------------- ### Custom transition property with bracket notation Source: https://tailwindcss.com/docs/transition-property Use the transition-[] syntax to set arbitrary transition properties. Useful for transitioning properties not covered by predefined utilities. ```HTML ``` -------------------------------- ### UTILITY border-bs-{color}-{shade} Source: https://tailwindcss.com/docs/border-color Sets the border-block-start-color property using predefined color variables and OKLCH values. ```APIDOC ## UTILITY border-bs-{color}-{shade} ### Description Sets the border-block-start-color property using Tailwind CSS color variables. ### Endpoint border-bs-{color}-{shade} ### Parameters #### Path Parameters - **color** (string) - Required - The color palette (rose, slate, gray, zinc, neutral). - **shade** (string) - Required - The color weight (e.g., 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). ### Request Example `border-bs-rose-500` ### Response #### Success Response (200) - **border-block-start-color** (string) - The CSS property value applied. #### Response Example `border-block-start-color: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */` ``` -------------------------------- ### Responsive border-spacing with breakpoint variants Source: https://tailwindcss.com/docs/border-spacing Prefix border-spacing utilities with breakpoint variants like md: to apply different spacing at specific screen sizes. ```html

``` -------------------------------- ### Variants: motion-reduce and responsive Source: https://tailwindcss.com/docs/transition-delay Applying transition-delay conditionally based on user preferences for reduced motion or screen size breakpoints. ```APIDOC ## transition-delay Variants\n\n### Description\nConditionally apply transition delays using variants like motion-reduce and responsive breakpoints.\n\n### Method\nCSS Utility Variant\n\n### Endpoint\n`motion-reduce:delay-`, `:delay-`\n\n### Parameters\n#### Variant Parameters\n- **motion-reduce** (variant) - Applies styles when the user has specified a preference for reduced motion.\n- **md/lg/etc.** (breakpoint) - Applies styles at specific screen sizes and above.\n\n### Request Example\n\n\n### Response\n#### Success Response (CSS Output)\n- **@media (prefers-reduced-motion: reduce)** - Media query for reduced motion preference.\n- **@media (min-width: 768px)** - Media query for medium screen breakpoint.\n\n#### Response Example\n@media (prefers-reduced-motion: reduce) {\n .motion-reduce\\:delay-0 {\n transition-delay: 0s;\n }\n} ``` -------------------------------- ### Custom flex-grow value with arbitrary syntax Source: https://tailwindcss.com/docs/flex-grow Use grow-[] syntax to set a completely custom flex-grow factor value. ```html

``` -------------------------------- ### Apply responsive block size using Tailwind CSS Source: https://tailwindcss.com/docs/block-size Use breakpoint prefixes to change block size at specific screen widths. ```html

``` -------------------------------- ### Apply responsive float utilities with Tailwind CSS Source: https://tailwindcss.com/docs/float Prefix float utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

``` -------------------------------- ### Basic min-width with spacing scale Source: https://tailwindcss.com/docs/min-width Apply fixed minimum widths using numeric utilities like min-w-24 and min-w-80 based on the spacing scale. Useful for constraining element sizes in flex layouts. ```html

min-w-80

min-w-64

min-w-48

min-w-40

min-w-32

min-w-24

``` -------------------------------- ### CSS .place-content-{value} Source: https://tailwindcss.com/docs/place-content Utilities for controlling how content is justified and aligned at the same time within a grid or flex container. ```APIDOC ## CSS .place-content-{value} ### Description Utilities for controlling how content is justified and aligned at the same time. ### Method CSS Class ### Endpoint .place-content-{value} ### Parameters #### Utility Classes - **place-content-center** (string) - Sets `place-content: center;` pack items in the center of the inline and block axes. - **place-content-center-safe** (string) - Sets `place-content: safe center;` pack items in the center with overflow safety. - **place-content-start** (string) - Sets `place-content: start;` pack items against the start of the inline and block axes. - **place-content-end** (string) - Sets `place-content: end;` pack items against the end of the inline and block axes. - **place-content-end-safe** (string) - Sets `place-content: safe end;` pack items against the end with overflow safety. - **place-content-between** (string) - Sets `place-content: space-between;` distribute items with equal space between each row and column. - **place-content-around** (string) - Sets `place-content: space-around;` distribute items with equal space around each row and column. - **place-content-evenly** (string) - Sets `place-content: space-evenly;` distribute items such that they are evenly spaced. - **place-content-baseline** (string) - Sets `place-content: baseline;` align items along the baseline. - **place-content-stretch** (string) - Sets `place-content: stretch;` stretch items along their grid areas. ### Request Example ```html

``` ### Response #### Success Response (200) - **place-content** (CSS Property) - The applied alignment and justification property. ``` -------------------------------- ### Apply Responsive Overflow Utilities with Tailwind CSS Source: https://tailwindcss.com/docs/overflow Prefix an `overflow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### UTILITY .content-{value} Source: https://tailwindcss.com/docs/align-content Utilities for controlling how rows are positioned in multi-row flex and grid containers. ```APIDOC ## UTILITY .content-{value} ### Description Controls the alignment of a flex or grid container's lines when there is extra space in the cross-axis. ### Method CSS Utility ### Endpoint /websites/tailwindcss/align-content ### Parameters #### Utility Classes - **content-normal** (string) - align-content: normal; - **content-center** (string) - align-content: center; - **content-start** (string) - align-content: flex-start; - **content-end** (string) - align-content: flex-end; - **content-between** (string) - align-content: space-between; - **content-around** (string) - align-content: space-around; - **content-evenly** (string) - align-content: space-evenly; - **content-baseline** (string) - align-content: baseline; - **content-stretch** (string) - align-content: stretch; ### Request Example { "html": "

" } ### Response #### Success Response (200) - **align-content** (property) - The resulting CSS property applied to the container element. #### Response Example { "css": "align-content: flex-start;" } ``` -------------------------------- ### Apply text color at responsive breakpoints Source: https://tailwindcss.com/docs/color Prefix a color utility with a breakpoint variant like md: to apply the color only at medium screen sizes and above. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Responsive perspective with breakpoint variant Source: https://tailwindcss.com/docs/perspective Apply perspective utilities conditionally at different screen sizes using breakpoint prefixes like md:. ```html

``` -------------------------------- ### Apply Responsive Grayscale Filters with Tailwind CSS Source: https://tailwindcss.com/docs/filter-grayscale Prefix `grayscale` utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

``` -------------------------------- ### Proportional flex item growth with grow- Source: https://tailwindcss.com/docs/flex-grow Use grow- utilities like grow-3 and grow-7 to make flex items grow proportionally based on their growth factor relative to each other. ```html

``` -------------------------------- ### Indigo Inset Shadow Utilities Source: https://tailwindcss.com/docs/box-shadow Utilities for setting the inset shadow color to various shades of indigo. ```css --tw-inset-shadow-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */ ``` ```css --tw-inset-shadow-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */ ``` -------------------------------- ### Apply Basic Backdrop Filters Source: https://tailwindcss.com/docs/backdrop-filter Use utilities like backdrop-blur-xs and backdrop-grayscale to apply filters to an element's backdrop. Multiple filters can be combined. ```html

``` -------------------------------- ### Applying responsive animations with Tailwind CSS Source: https://tailwindcss.com/docs/animation Prefix animation utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

``` -------------------------------- ### Apply responsive whitespace utilities in HTML Source: https://tailwindcss.com/docs/white-space Prefix `white-space` utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Apply custom and variable order values in HTML Source: https://tailwindcss.com/docs/order Use square brackets for arbitrary values or parentheses for direct CSS variable mapping. ```html

``` ```html

``` -------------------------------- ### Custom brightness value with bracket notation Source: https://tailwindcss.com/docs/filter-brightness Use the brightness-[] syntax to set brightness with a completely custom numeric value not covered by predefined utilities. ```html

``` -------------------------------- ### Responsive backdrop-hue-rotate with breakpoint variants Source: https://tailwindcss.com/docs/backdrop-filter-hue-rotate Prefix backdrop-hue-rotate utilities with breakpoint variants like md: to apply the utility only at specific screen sizes. ```html

``` -------------------------------- ### Basic list-style-position usage Source: https://tailwindcss.com/docs/list-style-position Use list-inside to place markers inside the list item and list-outside to place them outside. ```html

5 cups chopped Porcini mushrooms

5 cups chopped Porcini mushrooms

``` -------------------------------- ### place-content Responsive Variant Source: https://tailwindcss.com/docs/place-content Apply place-content utilities conditionally at specific breakpoints using responsive prefixes like md:. ```HTML

``` -------------------------------- ### Apply break-after Responsively with Tailwind CSS Source: https://tailwindcss.com/docs/break-after Use responsive prefixes like `md:` to apply `break-after` utilities only at specific screen sizes and above. ```html

``` -------------------------------- ### Cyan Inset Shadow Utilities Source: https://tailwindcss.com/docs/box-shadow Utilities for setting the inset shadow color to various shades of cyan. ```css --tw-inset-shadow-color: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */ ``` ```css --tw-inset-shadow-color: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */ ``` -------------------------------- ### Set transition duration in HTML Source: https://tailwindcss.com/docs/transition-duration Use duration utilities like duration-150 or duration-700 to set the transition length in milliseconds. ```html ``` -------------------------------- ### Max-width and range container queries Source: https://tailwindcss.com/docs/responsive-design Use @max-* variants for styles below a specific size or stack variants to target a specific container width range. ```html

``` ```html

``` -------------------------------- ### Configure Source Detection in CSS Imports Source: https://tailwindcss.com/docs/preflight Apply the source() function to the utilities import to control source detection when importing files individually. ```css @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) source(none); ``` -------------------------------- ### Custom backdrop contrast value with bracket notation Source: https://tailwindcss.com/docs/backdrop-filter-contrast Use the backdrop-contrast-[] syntax to set backdrop contrast with a completely custom value not covered by predefined utilities. ```html

``` -------------------------------- ### Custom timing function with CSS variable Source: https://tailwindcss.com/docs/transition-timing-function Use the ease-() syntax as shorthand for ease-[var()] to reference a CSS custom property. ```html ``` -------------------------------- ### Apply responsive gap in Tailwind CSS Source: https://tailwindcss.com/docs/gap Prefix gap utilities with breakpoint variants like `md:` to apply different gap sizes based on screen dimensions. ```html

``` -------------------------------- ### Pink Text Shadow Utilities Source: https://tailwindcss.com/docs/text-shadow Utility classes and CSS variable mappings for pink text shadows. ```css text-shadow-pink-600 ``` ```css --tw-text-shadow-color var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ ``` ```css text-shadow-pink-700 ``` ```css --tw-text-shadow-color var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ ``` ```css text-shadow-pink-800 ``` ```css --tw-text-shadow-color var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ ``` ```css text-shadow-pink-900 ``` ```css --tw-text-shadow-color var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ ``` ```css text-shadow-pink-950 ``` ```css --tw-text-shadow-color var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ ``` -------------------------------- ### Apply overscroll-behavior with responsive breakpoint Source: https://tailwindcss.com/docs/overscroll-behavior Prefix an overscroll-behavior utility with a breakpoint variant like md: to apply the utility only at medium screen sizes and above. ```html

``` -------------------------------- ### Responsive scroll-snap-align with breakpoint variants Source: https://tailwindcss.com/docs/scroll-snap-align Apply scroll-snap-align utilities conditionally at different breakpoints using prefixes like md:. Allows snap alignment to change based on screen size. ```html

``` -------------------------------- ### Apply Responsive Implicit Grid Column Sizing in Tailwind CSS Source: https://tailwindcss.com/docs/grid-auto-columns Prefix `grid-auto-columns` utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

``` -------------------------------- ### Configure Tailwind CSS PostCSS plugin Source: https://tailwindcss.com/docs/installation/framework-guides/gatsby Create 'postcss.config.js' and add '@tailwindcss/postcss' to enable Tailwind CSS processing. ```javascript module.exports = { plugins: { "@tailwindcss/postcss": {}, },}; ``` -------------------------------- ### Configure assets.deploy alias in mix.exs Source: https://tailwindcss.com/docs/installation/framework-guides/phoenix Update the `assets.deploy` alias in `mix.exs` to include Tailwind CSS build commands for production deployments. ```Elixir defp aliases do [ # … "assets.deploy": [ "tailwind myproject --minify", "esbuild myproject --minify", "phx.digest" ] ]end ``` -------------------------------- ### Apply contrast filters using Tailwind CSS Source: https://tailwindcss.com/docs/filter-contrast Use predefined contrast utilities like contrast-50 or contrast-200 to adjust the visual intensity of an element. ```html

``` -------------------------------- ### Apply custom transition durations Source: https://tailwindcss.com/docs/transition-duration Use square bracket notation for arbitrary values or parentheses for CSS variable shorthands. ```html ``` ```html ``` -------------------------------- ### Block and Inline Display HTML Source: https://tailwindcss.com/docs/display Demonstrates inline, inline-block, and block display utilities for controlling text flow. Use inline for normal text wrapping, inline-block to prevent text overflow, and block to place elements on their own line. ```html

When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.

While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.

Lastly, using the property display: block will put the element on its own line and fill its parent.

``` -------------------------------- ### Implementing dark mode with the dark variant Source: https://tailwindcss.com/docs/styling-with-utility-classes Apply styles specifically for dark mode using the dark: prefix. This targets the prefers-color-scheme: dark media query. ```html

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

``` ```css .dark\:bg-gray-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-800); }} ``` -------------------------------- ### Responsive Grid Layout with Tailwind CSS Breakpoints Source: https://tailwindcss.com/docs/hover-focus-and-other-states Define different grid column layouts for various screen sizes using responsive variants like `md` and `lg`. ```html

``` -------------------------------- ### Apply responsive z-index with Tailwind CSS Source: https://tailwindcss.com/docs/z-index Prefix a `z-index` utility with a breakpoint variant like `md:` to apply the utility only at medium screen sizes and above. ```html

``` -------------------------------- ### Responsive border width with breakpoint variants Source: https://tailwindcss.com/docs/border-width Prefix border-width utilities with breakpoint variants like md: to apply different border widths at specific screen sizes. ```html

``` -------------------------------- ### Import Tailwind CSS Source: https://tailwindcss.com/docs/installation/framework-guides/adonisjs Import Tailwind CSS in your main CSS file and configure the source directory for utility scanning. ```css @import "tailwindcss";@source "../views"; ``` -------------------------------- ### Use arbitrary values with square brackets Source: https://tailwindcss.com/docs/adding-custom-styles Generate utility classes on-the-fly with arbitrary values using square bracket notation. Works with all utilities and supports interactive and responsive modifiers like hover and lg. ```HTML

``` ```HTML

``` -------------------------------- ### Responsive skew with breakpoint variant Source: https://tailwindcss.com/docs/skew Prefix skew utilities with a breakpoint variant like md: to apply the skew only at medium screen sizes and above. ```html

``` -------------------------------- ### Custom backdrop brightness value with arbitrary syntax Source: https://tailwindcss.com/docs/backdrop-filter-brightness Use the backdrop-brightness-[] syntax to set backdrop brightness with a completely custom numeric value not covered by standard utilities. ```html

``` -------------------------------- ### Set Opacity with Predefined Values in Tailwind CSS Source: https://tailwindcss.com/docs/opacity Use `opacity-` utilities to apply predefined opacity levels to elements. ```html ``` -------------------------------- ### Apply solid rings to elements with Tailwind CSS Source: https://tailwindcss.com/docs/box-shadow Use `ring` or `ring-` utilities like `ring-2` and `ring-4` to apply a solid box-shadow ring. ```html ``` -------------------------------- ### Responsive box-decoration-break with breakpoint variant Source: https://tailwindcss.com/docs/box-decoration-break Use the md: breakpoint prefix to apply box-decoration-break utilities only at medium screen sizes and above. ```html

``` -------------------------------- ### Custom flex-grow with CSS variable Source: https://tailwindcss.com/docs/flex-grow Use grow-() syntax as shorthand for grow-[var()] to reference a CSS custom property. ```html

``` -------------------------------- ### Import Tailwind CSS and configure source scanning Source: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite Add @import directive to app.css and configure @source directives to scan Laravel and project directories for Tailwind utility usage. ```css @import "tailwindcss"; @source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php"; @source "../../storage/framework/views/*.php"; @source "..//**/*.blade.php"; @source "..//**/*.js"; ``` -------------------------------- ### Basic box-decoration-break with gradient background Source: https://tailwindcss.com/docs/box-decoration-break Apply box-decoration-slice or box-decoration-clone utilities to control how background, border, and padding render across line breaks. Use px-2 for horizontal padding and text-white for text color. ```html Hello
World Hello
World ``` -------------------------------- ### Set width using CSS custom properties Source: https://tailwindcss.com/docs/width Use the w-() syntax as shorthand for w-[var()], which automatically wraps the custom property in the var() function. ```html

``` -------------------------------- ### Set percentage-based block size using Tailwind CSS Source: https://tailwindcss.com/docs/block-size Use fractions or the full utility to define block size relative to the parent container. ```html

block-full

block-9/10

block-3/4

block-1/2

block-1/3

``` -------------------------------- ### Style placeholder-shown input with placeholder-shown variant Source: https://tailwindcss.com/docs/hover-focus-and-other-states Apply styles to an input when the placeholder is shown. ```HTML ``` -------------------------------- ### Generated CSS for utilities with variants Source: https://tailwindcss.com/docs/detecting-classes-in-source-files Output CSS showing the underline utility with hover and focus variants generated from brace expansion. ```CSS .underline { text-decoration-line: underline;}@media (hover: hover) { .hover\:underline:hover { text-decoration-line: underline; }}@media (focus: focus) { .focus\:underline:focus { text-decoration-line: underline; }} ``` -------------------------------- ### Use custom values and CSS variables for transition delay Source: https://tailwindcss.com/docs/transition-delay Apply arbitrary values using square brackets or reference CSS variables using the shorthand parentheses syntax. ```html ``` ```html ``` -------------------------------- ### Responsive Images and Videos Source: https://tailwindcss.com/docs/preflight Images and videos are constrained to their parent's width with preserved aspect ratio by default. Use 'max-w-none' to disable this behavior. ```css img,video { max-width: 100%; height: auto; } ``` -------------------------------- ### Slate Text Shadow Utilities Source: https://tailwindcss.com/docs/text-shadow Utility classes and CSS variable mappings for slate text shadows. ```css text-shadow-slate-50 ``` ```css --tw-text-shadow-color var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */ ``` ```css text-shadow-slate-100 ``` ```css --tw-text-shadow-color var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */ ``` ```css text-shadow-slate-200 ``` ```css --tw-text-shadow-color var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */ ``` ```css text-shadow-slate-300 ``` ```css --tw-text-shadow-color var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */ ``` ```css text-shadow-slate-400 ``` ```css --tw-text-shadow-color var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */ ``` ```css text-shadow-slate-500 ``` ```css --tw-text-shadow-color var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */ ``` ```css text-shadow-slate-600 ``` ```css --tw-text-shadow-color var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */ ``` ```css text-shadow-slate-700 ``` ```css --tw-text-shadow-color var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */ ``` ```css text-shadow-slate-800 ``` ```css --tw-text-shadow-color var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */ ``` ```css text-shadow-slate-900 ``` ```css --tw-text-shadow-color var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */ ``` ```css text-shadow-slate-950 ``` ```css --tw-text-shadow-color var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */ ``` -------------------------------- ### Grid Display HTML Source: https://tailwindcss.com/docs/display Creates a grid container using the grid utility. Combine with grid-cols and grid-rows utilities to define the grid structure and gap for spacing. ```html

``` -------------------------------- ### Custom text decoration thickness with bracket notation Source: https://tailwindcss.com/docs/text-decoration-thickness Set arbitrary text decoration thickness values using the decoration-[] syntax for values not covered by predefined utilities. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Basic background-blend-mode usage Source: https://tailwindcss.com/docs/background-blend-mode Apply blend modes like multiply, soft-light, and overlay to combine background images with background colors. ```html

``` -------------------------------- ### Responsive object-position with Tailwind CSS Source: https://tailwindcss.com/docs/object-position Apply `object-position` utilities conditionally at different screen sizes using responsive prefixes like `md:`. ```html

``` -------------------------------- ### Configure Theme Generation in CSS Imports Source: https://tailwindcss.com/docs/preflight Use theme(static) or theme(inline) on the theme.css import to control how theme variables are generated. ```css @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/theme.css" layer(theme) theme(static);@import "tailwindcss/utilities.css" layer(utilities); ``` -------------------------------- ### Custom and Arbitrary Shadow Utilities Source: https://tailwindcss.com/docs/box-shadow Define box shadows using custom properties or arbitrary values for flexible configurations. ```css box-shadow: var(); ``` ```css box-shadow: ; ``` -------------------------------- ### Basic usage of break-before in HTML Source: https://tailwindcss.com/docs/break-before Use utilities like break-before-column to force a column break before a specific element within a multi-column layout. ```html

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

``` -------------------------------- ### Float elements using logical properties with Tailwind CSS Source: https://tailwindcss.com/docs/float Utilize `float-start` for floating based on text direction, which maps to left or right depending on the `dir` attribute. ```html

Maybe we can live without libraries, people like you and me. ...

... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد

``` -------------------------------- ### Distributing space evenly with justify-evenly Source: https://tailwindcss.com/docs/justify-content Use the `justify-evenly` utility to distribute items with equal space around each item, including the ends of the container. ```html

``` -------------------------------- ### Unstyled Headings Source: https://tailwindcss.com/docs/preflight Preflight ensures headings have the same font size and weight as normal text by default. This encourages conscious styling and adherence to the type scale. ```css h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; } ``` -------------------------------- ### Traditional CSS vs Tailwind utility approach Source: https://tailwindcss.com/docs/styling-with-utility-classes Comparison showing how traditional CSS uses a single class for multiple states, whereas Tailwind uses separate utility classes for each state. ```html ``` -------------------------------- ### Flex Display HTML Source: https://tailwindcss.com/docs/display Creates a block-level flex container using the flex utility. Commonly used with flex alignment utilities like items-center for vertical centering. ```html

Andrew Alfred Technical advisor

``` -------------------------------- ### Update shadow and blur scales in HTML Source: https://tailwindcss.com/docs/upgrade-guide Replace v3 shadow and blur utilities with their v4 equivalents to maintain visual consistency. ```HTML ``` -------------------------------- ### Logical start-end border radius utilities in CSS Source: https://tailwindcss.com/docs/border-radius CSS output for rounded-se-* utilities that apply border-start-end-radius using logical properties. Supports predefined sizes (xs through 4xl), none, full, custom properties, and arbitrary values. ```CSS border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */ ``` ```CSS border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */ ``` ```CSS border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */ ``` ```CSS border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */ ``` ```CSS border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */ ``` ```CSS border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */ ``` ```CSS border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ ``` ```CSS border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */ ``` ```CSS border-start-end-radius: 0; ``` ```CSS border-start-end-radius: calc(infinity * 1px); ``` ```CSS border-start-end-radius: var(); ``` ```CSS border-start-end-radius: ; ``` -------------------------------- ### Use custom shadow color utility in markup Source: https://tailwindcss.com/docs/box-shadow Apply a custom shadow color utility defined in the theme configuration. ```HTML

``` -------------------------------- ### Apply Responsive Maximum Height with Tailwind CSS Source: https://tailwindcss.com/docs/max-height Prefix `max-height` utilities with a breakpoint variant like `md:` to apply them only at specific screen sizes and above. ```html

``` -------------------------------- ### Import CSS file in root route Source: https://tailwindcss.com/docs/installation/framework-guides/tanstack-start Import the styles.css file in your __root.tsx file using the ?url query parameter and add it to the head links configuration. ```typescript // other imports... import appCss from '../styles.css?url' export const Route = createRootRoute({ head: () => ({ meta: [ // your meta tags and site config ], links: [{ rel: 'stylesheet', href: appCss }], // other head config }), component: RootComponent, }) ``` -------------------------------- ### Apply Responsive Outline Styles with Tailwind CSS Source: https://tailwindcss.com/docs/outline-style Prefix outline-style utilities with breakpoint variants like md: to apply them only at specific screen sizes and above. ```html

``` -------------------------------- ### backface-visibility with responsive breakpoint Source: https://tailwindcss.com/docs/backface-visibility Use the md: breakpoint variant to apply backface-hidden only at medium screen sizes and above, with backface-visible as the default on smaller screens. ```html

``` -------------------------------- ### Set percentage-based max-inline-size Source: https://tailwindcss.com/docs/max-inline-size Use fractions or the 'full' keyword to define maximum inline sizes relative to the parent container. ```html

max-inline-9/10

max-inline-3/4

max-inline-1/2

max-inline-1/3

``` -------------------------------- ### Utility Classes: .ease-{modifier} Source: https://tailwindcss.com/docs/transition-timing-function Standard utility classes for applying common easing functions to transitions. These classes map directly to the transition-timing-function CSS property. ```APIDOC ## .ease-{modifier} ### Description Utilities for controlling the easing of CSS transitions using predefined curves. ### Method CSS Class ### Endpoint .ease-linear, .ease-in, .ease-out, .ease-in-out, .ease-initial ### Parameters #### Class Modifiers - **linear** - transition-timing-function: linear; - **in** - transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */ - **out** - transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */ - **in-out** - transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */ - **initial** - transition-timing-function: initial; ### Request Example ``` -------------------------------- ### Apply basic saturation filters in HTML with Tailwind CSS Source: https://tailwindcss.com/docs/filter-saturate Use predefined `saturate-` utilities to control an element's saturation level. These classes apply a percentage-based saturation filter. ```html

``` -------------------------------- ### @apply directive for composing utilities Source: https://tailwindcss.com/docs/functions-and-directives Inline existing utility classes into custom CSS, useful for overriding third-party library styles while maintaining design token consistency. ```CSS .select2-dropdown { @apply rounded-b-lg shadow-md; } .select2-search { @apply rounded border border-gray-300; } .select2-results__group { @apply text-lg font-bold text-gray-900; } ``` -------------------------------- ### Set background-size to cover with Tailwind CSS Source: https://tailwindcss.com/docs/background-size Use the `bg-cover` utility to scale the background image until it fills the background layer, cropping if needed. ```html

``` -------------------------------- ### Apply responsive list marker styles Source: https://tailwindcss.com/docs/list-style-type Use breakpoint variants like md: to change list marker styles at different screen sizes. ```html

``` -------------------------------- ### Responsive grid-auto-rows in HTML Source: https://tailwindcss.com/docs/grid-auto-rows Prefix a grid-auto-rows utility with a breakpoint variant like md: to apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### Tailwind CSS -inset-bs- utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-block-start` property to a negative calculated percentage value based on a fraction. ```css inset-block-start: calc( * -100%); ``` -------------------------------- ### Responsive justify-items alignment Source: https://tailwindcss.com/docs/justify-items Apply justify-items utilities at specific breakpoints using variants like md:. ```html

``` -------------------------------- ### Responsive sepia filter with breakpoint variant Source: https://tailwindcss.com/docs/filter-sepia Prefix sepia utilities with breakpoint variants like md: to apply the filter only at specific screen sizes and above. ```html

``` -------------------------------- ### object-scale-down for scaling down to fit Source: https://tailwindcss.com/docs/object-fit Use object-scale-down to display content at original size but scale down if necessary to fit the container. ```HTML

``` -------------------------------- ### Apply responsive background repeat with Tailwind CSS Source: https://tailwindcss.com/docs/background-repeat Prefix a `background-repeat` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### Stacking multiple variants in Tailwind CSS Source: https://tailwindcss.com/docs/styling-with-utility-classes Combine multiple prefixes to apply a utility only when all conditions match, such as combining disabled: and hover:. ```html ``` -------------------------------- ### Import Tailwind CSS in app.css Source: https://tailwindcss.com/docs/installation/framework-guides/symfony Add @import directive to load Tailwind CSS and @source directive to prevent recompile loops during watch mode. ```css @import "tailwindcss";@source not "../../public"; ``` -------------------------------- ### Generated CSS for utilities with ranges Source: https://tailwindcss.com/docs/detecting-classes-in-source-files Output CSS showing red background utilities from 50 to 950 with hover variants, generated from range expansion. ```CSS .bg-red-50 { background-color: var(--color-red-50);}.bg-red-100 { background-color: var(--color-red-100);}.bg-red-200 { background-color: var(--color-red-200);}/* ... */.bg-red-800 { background-color: var(--color-red-800);}.bg-red-900 { background-color: var(--color-red-900);}.bg-red-950 { background-color: var(--color-red-950);}@media (hover: hover) { .hover\:bg-red-50:hover { background-color: var(--color-red-50); } /* ... */ .hover\:bg-red-950:hover { background-color: var(--color-red-950); }} ``` -------------------------------- ### Apply Block Logical Margin Properties with Tailwind CSS Source: https://tailwindcss.com/docs/margin Use `mbs-` and `mbe-` utilities to set `margin-block-start` and `margin-block-end`, which adapt to writing mode. ```html

mbs-8

``` -------------------------------- ### Set custom width with bracket notation Source: https://tailwindcss.com/docs/width Use the w-[] syntax to apply arbitrary width values not covered by the default spacing scale. ```html

``` -------------------------------- ### Support multi-directional layouts with RTL and LTR variants Source: https://tailwindcss.com/docs/hover-focus-and-other-states Use rtl: and ltr: variants to adjust spacing and layout for different text directions. ```html

...

``` -------------------------------- ### Wrap anywhere with wrap-anywhere Source: https://tailwindcss.com/docs/overflow-wrap Use this utility to factor in mid-word line breaks for intrinsic size calculations, which is particularly useful in flex containers. ```html

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

``` -------------------------------- ### Set width and height simultaneously using Tailwind CSS Source: https://tailwindcss.com/docs/height Use size- utilities to apply the same value to both width and height. ```html

size-16

size-20

size-24

size-32

size-40

``` -------------------------------- ### Use custom blur values and CSS variables Source: https://tailwindcss.com/docs/filter-blur Apply arbitrary blur values using square brackets or reference CSS variables with the shorthand parenthesis syntax. ```html

``` ```html

``` -------------------------------- ### Custom values and CSS variables for backdrop opacity Source: https://tailwindcss.com/docs/backdrop-filter-opacity Apply arbitrary opacity values using square brackets or reference CSS variables directly using parentheses. ```html

``` ```html

``` -------------------------------- ### Apply Responsive Grid Columns with Tailwind CSS Breakpoints Source: https://tailwindcss.com/docs/grid-template-columns Prefix `grid-template-columns` utilities with breakpoint variants like `md:` to apply styles conditionally. This enables responsive grid layouts that adapt to different screen sizes. ```html

``` -------------------------------- ### Configure Tailwind plugin in config.exs Source: https://tailwindcss.com/docs/installation/framework-guides/phoenix Set the desired Tailwind CSS version and customize asset input/output paths within your `config/config.exs` file. ```Elixir config :tailwind, version: "4.1.10", myproject: [ args: ~w( --input=assets/css/app.css --output=priv/static/assets/app.css ), cd: Path.expand("..", __DIR__) ] ``` -------------------------------- ### Basic filter application Source: https://tailwindcss.com/docs/filter Apply filters like blur and grayscale to elements. Multiple filter utilities can be combined on a single element. ```html

``` -------------------------------- ### UTILITY cursor-[value] Source: https://tailwindcss.com/docs/cursor Utilities for applying custom cursor values or CSS variables using arbitrary value syntax. ```APIDOC ## UTILITY cursor-[value] ### Description Use the arbitrary value syntax to set a cursor based on a completely custom value or a CSS variable. ### Method CSS CLASS ### Endpoint .cursor-[] / .cursor-() ### Parameters #### Path Parameters - **value** (string) - Required - A custom CSS cursor value (e.g., a URL to a cursor file). - **custom-property** (string) - Required - A CSS variable name representing the cursor style. ### Request Example ### Response #### Success Response (CSS) - **cursor** (string) - The resulting CSS cursor property with the custom value or var() function. #### Response Example { "cursor": "url(hand.cur), pointer" } ``` -------------------------------- ### Basic background color utilities in HTML Source: https://tailwindcss.com/docs/background-color Apply predefined background colors using utility classes like bg-blue-500, bg-cyan-500, and bg-pink-500 to style button elements. ```html ``` -------------------------------- ### Basic grid-auto-flow usage Source: https://tailwindcss.com/docs/grid-auto-flow Use grid-flow-row-dense to fill gaps in a grid layout. ```html

``` -------------------------------- ### Apply custom numeric saturation in HTML with Tailwind CSS Source: https://tailwindcss.com/docs/filter-saturate Set a precise saturation value using the `saturate-[]` arbitrary value syntax. This allows for any custom numeric percentage. ```html

``` -------------------------------- ### Shadow Size Utilities Source: https://tailwindcss.com/docs/box-shadow Apply predefined box shadow sizes to elements using CSS variables for consistent elevation levels. ```css box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */ ``` ```css box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */ ``` ```css box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */ ``` ```css box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */ ``` ```css box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */ ``` ```css box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */ ``` ```css box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */ ``` ```css box-shadow: 0 0 #0000; ``` -------------------------------- ### Add Conic Gradients Source: https://tailwindcss.com/docs/background-image Apply conic gradients using `bg-conic` or `bg-conic-` utilities, defining color stops and their distribution. ```html

``` -------------------------------- ### Scroll background with container Source: https://tailwindcss.com/docs/background-attachment Use bg-local to scroll the background image along with both the container and viewport. ```html

``` -------------------------------- ### Responsive mask-repeat with breakpoint variant Source: https://tailwindcss.com/docs/mask-repeat Prefix mask-repeat utilities with breakpoint variants like md: to apply them conditionally at specific screen sizes. ```HTML

``` -------------------------------- ### Apply responsive flex-shrink variants in Tailwind CSS Source: https://tailwindcss.com/docs/flex-shrink Use breakpoint prefixes like md: to change shrink behavior at different screen sizes. ```html

``` -------------------------------- ### Applying responsive border radius with Tailwind CSS Source: https://tailwindcss.com/docs/border-radius Applies a default border radius and then overrides it with `rounded-lg` at medium screen sizes and above using a responsive variant. ```html

``` -------------------------------- ### --spacing() function for theme spacing Source: https://tailwindcss.com/docs/functions-and-directives Generate spacing values based on your theme's spacing scale, compiled to calc() expressions. ```CSS .my-element { margin: --spacing(4); } ``` ```CSS .my-element { margin: calc(var(--spacing) * 4); } ``` -------------------------------- ### Using logical properties for border radius in HTML Source: https://tailwindcss.com/docs/border-radius Applies `rounded-s-lg` using logical properties, demonstrating its behavior in both left-to-right (LTR) and right-to-left (RTL) text directions. ```html

``` -------------------------------- ### Support negative values in custom utility Source: https://tailwindcss.com/docs/adding-custom-styles Register separate positive and negative utilities with different declarations to support negative values. Use multiplication by -1 for negative variants. ```CSS @utility inset-* { inset: --spacing(--value(integer)); inset: --value([percentage], [length]); } @utility -inset-* { inset: --spacing(--value(integer) * -1); inset: calc(--value([percentage], [length]) * -1); } ``` -------------------------------- ### Tailwind CSS -inset-s- utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-inline-start` property to a negative calculated percentage value based on a fraction. ```css inset-inline-start: calc( * -100%); ``` -------------------------------- ### Create custom variant with shorthand syntax Source: https://tailwindcss.com/docs/adding-custom-styles Use shorthand syntax for custom variants when nesting is not required. Simpler alternative to full nested syntax. ```CSS @custom-variant theme-midnight (&:where([data-theme="midnight"] *)); ``` -------------------------------- ### Using arbitrary breakpoint values Source: https://tailwindcss.com/docs/responsive-design Generate custom breakpoints on the fly using min-[...] or max-[...] variants with specific CSS values. ```html

``` -------------------------------- ### Set Minimum Inline Size with Container Scale Source: https://tailwindcss.com/docs/min-inline-size Utilize `min-inline-sm` and `min-inline-xl` to set a fixed minimum inline size based on the container scale. ```html

min-inline-lg

min-inline-md

min-inline-sm

min-inline-xs

min-inline-2xs

min-inline-3xs

``` -------------------------------- ### Apply responsive backdrop saturation with Tailwind CSS Source: https://tailwindcss.com/docs/backdrop-filter-saturate Prefix `backdrop-filter: saturate()` utilities with breakpoint variants like `md:` to apply them only at specific screen sizes and above. ```html

``` -------------------------------- ### Responsive background-attachment variant Source: https://tailwindcss.com/docs/background-attachment Apply background-attachment utilities conditionally at different breakpoints using responsive prefixes like md:. ```html

``` -------------------------------- ### Set max-width using spacing scale Source: https://tailwindcss.com/docs/max-width Use numeric utilities to set a fixed maximum width based on the spacing scale. ```html

max-w-96

max-w-80

max-w-64

max-w-48

max-w-40

max-w-32

max-w-24

``` -------------------------------- ### Teal Inset Shadow Utilities Source: https://tailwindcss.com/docs/box-shadow Utilities for setting the inset shadow color to various shades of teal. ```css --tw-inset-shadow-color: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */ ``` ```css --tw-inset-shadow-color: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */ ``` ```css --tw-inset-shadow-color: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */ ``` ```css --tw-inset-shadow-color: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */ ``` -------------------------------- ### Apply clear utilities responsively Source: https://tailwindcss.com/docs/clear Prefix clear utilities with breakpoint variants like md: to apply them conditionally. This enables responsive layout adjustments for floated elements. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Use custom theme timing function in markup Source: https://tailwindcss.com/docs/transition-timing-function Apply the custom ease-in-expo utility defined in the theme to an element. ```html ``` -------------------------------- ### Set percentage-based inline size Source: https://tailwindcss.com/docs/inline-size Use inline-full or inline- utilities to give an element a percentage-based inline size. ```html

inline-1/2

inline-2/5

inline-3/5

inline-1/3

inline-2/3

inline-full

``` -------------------------------- ### Gray Text Shadow Utilities Source: https://tailwindcss.com/docs/text-shadow Utility classes and CSS variable mappings for gray text shadows. ```css text-shadow-gray-50 ``` ```css --tw-text-shadow-color var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ ``` ```css text-shadow-gray-100 ``` ```css --tw-text-shadow-color var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ ``` ```css text-shadow-gray-200 ``` ```css --tw-text-shadow-color var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ ``` ```css text-shadow-gray-300 ``` ```css --tw-text-shadow-color var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ ``` ```css text-shadow-gray-400 ``` ```css --tw-text-shadow-color var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ ``` ```css text-shadow-gray-500 ``` ```css --tw-text-shadow-color var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ ``` ```css text-shadow-gray-600 ``` ```css --tw-text-shadow-color var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ ``` ```css text-shadow-gray-700 ``` ```css --tw-text-shadow-color var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ ``` ```css text-shadow-gray-800 ``` ```css --tw-text-shadow-color var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ ``` ```css text-shadow-gray-900 ``` ```css --tw-text-shadow-color var(--color-gray-900); /* oklch(21% 0.034 264.665) */ ``` ```css text-shadow-gray-950 ``` ```css --tw-text-shadow-color var(--color-gray-950); /* oklch(13% 0.028 261.692) */ ``` -------------------------------- ### Using stacked fractions with Tailwind CSS Source: https://tailwindcss.com/docs/font-variant-numeric Apply the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions in fonts that support them. ```html

1/2 3/4 5/6

``` -------------------------------- ### Basic brightness filter utilities Source: https://tailwindcss.com/docs/filter-brightness Apply predefined brightness levels to elements using utility classes like brightness-50, brightness-100, brightness-125, and brightness-200. ```html

``` -------------------------------- ### Use container query units in HTML with Tailwind CSS Source: https://tailwindcss.com/docs/responsive-design Reference the container's size using container query length units, such as `cqw` (container query width), as arbitrary values in utility classes like `w-[50cqw]`. ```html

``` -------------------------------- ### Styling interactive states with hover, focus, and active Source: https://tailwindcss.com/docs/hover-focus-and-other-states Apply different styles for hover, focus, and active states simultaneously using their respective variant prefixes. ```html ``` -------------------------------- ### Targeting a breakpoint range in HTML Source: https://tailwindcss.com/docs/responsive-design Stack a responsive variant with a max-* variant to apply styles only within a specific width range. ```html

``` -------------------------------- ### Apply Responsive Background Position Source: https://tailwindcss.com/docs/background-position Prefix a `background-position` utility with a breakpoint variant like `md:` to apply it at specific screen sizes. ```html

``` -------------------------------- ### Applying Hyphenation Responsively Source: https://tailwindcss.com/docs/hyphens Prefix a `hyphens` utility with a breakpoint variant like `md:` to apply the utility only at specific screen sizes and above. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Use custom and variable list markers Source: https://tailwindcss.com/docs/list-style-type Define custom marker styles using arbitrary values or CSS variables with the list-[] and list-() syntax. ```html

``` ```html

``` -------------------------------- ### flex-grow Utility Classes Reference Source: https://tailwindcss.com/docs/flex-grow Complete reference of all available flex-grow utility classes in Tailwind CSS v4.2, including basic grow utilities, numbered variants, custom values, and CSS variable support. ```APIDOC ## Flex-grow Utility Classes ### Description Utilities for controlling how flex items grow to fill available space in a flex container. ### Available Classes | Class | CSS Output | Purpose | |-------|-----------|----------| | `grow` | `flex-grow: 1;` | Allow a flex item to grow and fill available space | | `grow-` | `flex-grow: ;` | Set flex grow factor to a specific number | | `grow-[]` | `flex-grow: ;` | Set flex grow factor using arbitrary custom values | | `grow-()` | `flex-grow: var();` | Set flex grow factor using CSS custom properties | ### Usage Examples #### Basic Growth Allow a flex item to grow to fill available space: ```html

``` #### Proportional Growth Make flex items grow proportionally based on their growth factor: ```html

``` #### Prevent Growth Prevent a flex item from growing: ```html

``` #### Custom Values Set flex grow factor using arbitrary custom values: ```html

``` #### CSS Custom Properties Set flex grow factor using CSS variables: ```html

``` ### Responsive Design Prefix any flex-grow utility with a breakpoint variant to apply it at specific screen sizes: ```html

``` Common breakpoint variants: `sm:`, `md:`, `lg:`, `xl:`, `2xl:` ``` -------------------------------- ### Apply Tailwind CSS backdrop saturation utilities Source: https://tailwindcss.com/docs/backdrop-filter-saturate Use `backdrop-saturate-` utilities like `backdrop-saturate-50`, `backdrop-saturate-125`, and `backdrop-saturate-200` to control the saturation of an element's backdrop. ```html

``` -------------------------------- ### Apply Backdrop Grayscale with Custom Value Source: https://tailwindcss.com/docs/backdrop-filter-grayscale Use the backdrop-grayscale-[] syntax to set the backdrop grayscale based on a completely custom value. ```html

``` -------------------------------- ### Responsive table-layout with breakpoint variants Source: https://tailwindcss.com/docs/table-layout Apply table-layout utilities conditionally at specific breakpoints using prefixes like md:. Use table-auto by default and switch to table-fixed at medium screen sizes and above. ```HTML

``` -------------------------------- ### place-self Utility Reference Source: https://tailwindcss.com/docs/place-self Complete reference of all place-self utility classes and their corresponding CSS styles. These utilities control how individual items are justified and aligned simultaneously in flexbox and grid containers. ```APIDOC ## place-self Utilities ### Description Utilities for controlling how an individual item is justified and aligned at the same time. ### Available Classes | Class | CSS Style | |-------|----------| | `place-self-auto` | `place-self: auto;` | | `place-self-start` | `place-self: start;` | | `place-self-end` | `place-self: end;` | | `place-self-end-safe` | `place-self: safe end;` | | `place-self-center` | `place-self: center;` | | `place-self-center-safe` | `place-self: safe center;` | | `place-self-stretch` | `place-self: stretch;` | ### Usage Apply any of these classes to an individual grid or flex item to control its alignment on both axes. ``` -------------------------------- ### Using default positioning with justify-normal Source: https://tailwindcss.com/docs/justify-content Use the `justify-normal` utility to position content items in their default state, as if no `justify-content` value was applied. ```html

``` -------------------------------- ### Using custom theme utilities in HTML Source: https://tailwindcss.com/docs/letter-spacing Apply custom letter-spacing utilities defined in your CSS theme configuration. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Apply Responsive Font Weight in HTML Source: https://tailwindcss.com/docs/font-weight Prefix font weight utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Set Gradient Color Stops Source: https://tailwindcss.com/docs/background-image Define the colors at different points in a gradient using `from-`, `via-`, and `to-` utilities. ```html

``` -------------------------------- ### Scale elements proportionally using Tailwind CSS Source: https://tailwindcss.com/docs/scale Use scale- utilities to resize an element by a percentage of its original size. ```html

``` -------------------------------- ### Customize shadow color with theme variables Source: https://tailwindcss.com/docs/text-shadow Define custom colors using `--color-*` theme variables to create custom shadow color utilities. The color can be applied via the generated utility class. ```CSS @theme { --color-regal-blue: #243c5a; } ``` -------------------------------- ### Custom z-index Values Source: https://tailwindcss.com/docs/z-index Demonstrates using arbitrary custom values with bracket notation and CSS variable references with parentheses syntax. ```APIDOC ## Using Custom z-index Values ### Description Use the `z-[]` syntax to set the stack order based on a completely custom value, or use `z-()` to reference CSS variables. ### Arbitrary Values with Brackets ```html

Content

``` ### CSS Variable References with Parentheses ```html

Content

``` ### Details The `z-()` syntax is shorthand for `z-[var()]` that automatically adds the `var()` function for you. ``` -------------------------------- ### Set background-size to auto with Tailwind CSS Source: https://tailwindcss.com/docs/background-size Use the `bg-auto` utility to display the background image at its default size. ```html

``` -------------------------------- ### UTILITY {variant}:cursor-{style} Source: https://tailwindcss.com/docs/cursor Responsive variants for applying different cursor styles at specific breakpoints. ```APIDOC ## UTILITY {variant}:cursor-{style} ### Description Prefix a cursor utility with a breakpoint variant to apply the style only at specific screen sizes. ### Method CSS CLASS ### Endpoint .{variant}:cursor-{style} ### Parameters #### Path Parameters - **variant** (string) - Required - The responsive breakpoint (e.g., sm, md, lg, xl). - **style** (string) - Required - The cursor style to apply at the specified breakpoint. ### Request Example ### Response #### Success Response (CSS) - **media-query** (string) - The CSS media query generated for the breakpoint. #### Response Example { "@media (min-width: 768px)": { ".md:cursor-auto": "cursor: auto" } } ``` -------------------------------- ### Custom brightness with CSS variable Source: https://tailwindcss.com/docs/filter-brightness Use the brightness-() syntax as shorthand for brightness-[var()] to reference CSS custom properties for dynamic brightness control. ```html

``` -------------------------------- ### Set inset ring color with opacity modifier Source: https://tailwindcss.com/docs/box-shadow Apply inset ring utilities with color and opacity modifiers. Use inset-ring-[color] for full opacity and inset-ring-[color]/[opacity] for custom opacity values. ```HTML ``` -------------------------------- ### Customize container utility in CSS Source: https://tailwindcss.com/docs/upgrade-guide Use the @utility directive to define custom container behavior as v3 configuration options are removed. ```CSS @utility container { margin-inline: auto; padding-inline: 2rem;} ``` -------------------------------- ### Use arbitrary container query values in HTML with Tailwind CSS Source: https://tailwindcss.com/docs/responsive-design Apply one-off container query sizes using arbitrary value variants like `@min-[475px]` or `@max-[960px]` directly in your HTML for specific responsive needs. ```html

``` -------------------------------- ### Apply basic outline offset Source: https://tailwindcss.com/docs/outline-offset Use utilities like outline-offset-2 and outline-offset-4 to change the spacing between an element and its outline. ```html ``` -------------------------------- ### Responsive translate with breakpoint variant Source: https://tailwindcss.com/docs/translate Prefix translate utilities with breakpoint variants like `md:` to apply different translations at specific screen sizes. ```html

``` -------------------------------- ### Apply custom grid row values and CSS variables Source: https://tailwindcss.com/docs/grid-row Use square bracket notation for arbitrary values or the parenthesis shorthand for CSS variables. ```html

``` ```html

``` -------------------------------- ### Apply whitespace-pre-line in HTML Source: https://tailwindcss.com/docs/white-space Use `whitespace-pre-line` to preserve newlines but collapse spaces, allowing text to wrap normally. ```html

Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.

``` -------------------------------- ### Custom and variable-based backdrop inversion Source: https://tailwindcss.com/docs/backdrop-filter-invert Apply specific inversion levels using square bracket notation or shorthand syntax for CSS variables. ```html

``` ```html

``` -------------------------------- ### Add Radial Gradients Source: https://tailwindcss.com/docs/background-image Apply radial gradients using `bg-radial` or `bg-radial-[]` utilities, specifying color stops and their positions. ```html

``` -------------------------------- ### Distributing space around items with justify-around Source: https://tailwindcss.com/docs/justify-content Use the `justify-around` utility to distribute items with equal space on both sides of each item along the main axis. ```html

``` -------------------------------- ### Responsive transition-behavior with breakpoint variant Source: https://tailwindcss.com/docs/transition-behavior Apply transition-behavior utilities conditionally at specific breakpoints using the md: variant. This button uses transition-discrete on mobile and switches to transition-normal at medium screen sizes and above. ```html ``` -------------------------------- ### Remove box shadow with utility classes Source: https://tailwindcss.com/docs/box-shadow Use shadow-none, inset-shadow-none, ring-0, or inset-ring-0 utilities to remove existing box shadows from elements. ```HTML

``` -------------------------------- ### Applying Responsive Text Alignment with Tailwind CSS Source: https://tailwindcss.com/docs/text-align Prefix text alignment utilities with breakpoint variants like `md:` to apply styles conditionally based on screen size. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Set fixed block size using Tailwind CSS Source: https://tailwindcss.com/docs/block-size Use numeric utilities to set block size based on the spacing scale. ```html

block-96

block-80

block-64

block-48

block-40

block-32

block-24

``` -------------------------------- ### Responsive list-style-position Source: https://tailwindcss.com/docs/list-style-position Apply list-style-position utilities conditionally at different breakpoints using variant prefixes. ```html

``` -------------------------------- ### Simulate HTML table with Tailwind CSS Source: https://tailwindcss.com/docs/display Apply `table`, `table-row`, `table-cell`, and other `table`-related utilities to make elements behave like their respective table elements. ```html

Song

Artist

Year

The Sliding Mr. Bones (Next Stop, Pottersville)

Malcolm Lockyer

1961

Witchy Woman

The Eagles

1972

Shining Star

Earth, Wind, and Fire

1975

``` -------------------------------- ### Apply responsive height utilities using Tailwind CSS Source: https://tailwindcss.com/docs/height Use breakpoint variants like md: to apply height utilities conditionally. ```html

``` -------------------------------- ### Configure Vite Plugin Source: https://tailwindcss.com/docs/installation/framework-guides/adonisjs Add the Tailwind CSS plugin to the Vite configuration file. ```typescript import { defineConfig } from 'vite'import adonisjs from '@adonisjs/vite/client'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), adonisjs({ // … }), ],}) ``` -------------------------------- ### text-start & text-end - Logical Properties Source: https://tailwindcss.com/docs/text-align The text-start and text-end utilities use CSS logical properties to align text based on the document's text direction. These are ideal for supporting bidirectional text and internationalization. ```APIDOC ## text-start & text-end ### Description Logical property utilities that align text to the start or end of the element based on the text direction (left-to-right or right-to-left). ### CSS Output ```css /* text-start */ text-align: start; /* text-end */ text-align: end; ``` ### Usage Example - Right-to-Left Text ```html

فبدأت بالسير نحو الماء...

``` ### Usage Example - Left-to-Right Text ```html

Text aligned to the start...

``` ``` -------------------------------- ### Negative z-index Values Source: https://tailwindcss.com/docs/z-index Shows how to use negative z-index values by prefixing the class name with a dash to convert it to a negative value. ```APIDOC ## Using Negative z-index Values ### Description To use a negative z-index value, prefix the class name with a dash to convert it to a negative value. ### Example ```html

``` ### Usage Negative z-index values like `-z-10`, `-z-20` can be used to push elements behind other elements or the background. ``` -------------------------------- ### Apply break-inside Responsively with Tailwind CSS (HTML) Source: https://tailwindcss.com/docs/break-inside Apply `break-inside` utilities conditionally at different screen sizes by prefixing them with responsive variants like `md:`. ```html

``` -------------------------------- ### Basic backdrop brightness with standard utilities Source: https://tailwindcss.com/docs/backdrop-filter-brightness Apply backdrop brightness filters using standard utility classes like backdrop-brightness-50 and backdrop-brightness-150 to control an element's backdrop brightness effect. ```html

``` -------------------------------- ### Apply custom transform values and CSS variables Source: https://tailwindcss.com/docs/transform Use square bracket syntax for arbitrary values or parentheses for CSS variables. ```html

``` ```html

``` -------------------------------- ### Import global CSS into Gatsby browser configuration Source: https://tailwindcss.com/docs/installation/framework-guides/gatsby Create or update 'gatsby-browser.js' to import the global CSS file into your Gatsby project. ```javascript import './src/styles/global.css'; ``` -------------------------------- ### Apply horizontal and vertical padding in Tailwind CSS Source: https://tailwindcss.com/docs/padding Use px for horizontal padding (left and right) and py for vertical padding (top and bottom). ```html

px-8

``` ```html

py-8

``` -------------------------------- ### UTILITY cursor-{style} Source: https://tailwindcss.com/docs/cursor Standard utilities for controlling the cursor style when hovering over an element. ```APIDOC ## UTILITY cursor-{style} ### Description Utilities for controlling the cursor style when hovering over an element. Includes support for standard CSS cursors like pointer, wait, move, and help. ### Method CSS CLASS ### Endpoint .cursor-{style} ### Parameters #### Path Parameters - **style** (string) - Required - The cursor type to apply. Options include: auto, default, pointer, wait, text, move, help, not-allowed, none, context-menu, progress, cell, crosshair, vertical-text, alias, copy, no-drop, grab, grabbing, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, zoom-in, zoom-out. ### Request Example ### Response #### Success Response (CSS) - **cursor** (string) - The resulting CSS cursor property applied to the element. #### Response Example { "cursor": "pointer" } ``` -------------------------------- ### Utility: transition-delay Source: https://tailwindcss.com/docs/transition-delay Utilities for controlling the delay of CSS transitions using predefined numeric values or custom properties. ```APIDOC ## CSS transition-delay\n\n### Description\nUtilities for controlling the delay of CSS transitions.\n\n### Method\nCSS Utility Class\n\n### Endpoint\n`delay-`, `delay-()`, `delay-[]`\n\n### Parameters\n#### Class Parameters\n- **number** (number) - Required - The delay in milliseconds (e.g., 150, 300, 700).\n- **custom-property** (string) - Optional - A CSS variable name wrapped in parentheses.\n- **value** (string) - Optional - An arbitrary CSS value wrapped in square brackets.\n\n### Request Example\n\n\n### Response\n#### Success Response (CSS Output)\n- **transition-delay** (property) - Sets the delay before the transition starts.\n\n#### Response Example\n{\n \"transition-delay\": \"150ms\"\n} ``` -------------------------------- ### Border Color Utilities - Custom and Arbitrary Values Source: https://tailwindcss.com/docs/border-color Advanced border color utilities supporting custom CSS properties and arbitrary values. Includes utilities for semantic color keywords (inherit, current, transparent) and custom property/value syntax. ```APIDOC ## Border Color - Custom and Arbitrary Values ### Description Advanced border color utilities for custom properties, arbitrary values, and semantic color keywords. Supports both standard border colors and horizontal border colors (border-x). ### Custom Property Syntax | Class | CSS Output | |-------|------------| | `border-()` | `border-color: var();` | | `border-[]` | `border-color: ;` | ### Semantic Keywords - Standard Border | Class | CSS Output | |-------|------------| | `border-inherit` | `border-color: inherit;` | | `border-current` | `border-color: currentColor;` | | `border-transparent` | `border-color: transparent;` | | `border-black` | `border-color: var(--color-black); /* #000 */` | | `border-white` | `border-color: var(--color-white); /* #fff */` | ### Semantic Keywords - Horizontal Border | Class | CSS Output | |-------|------------| | `border-x-inherit` | `border-inline-color: inherit;` | | `border-x-current` | `border-inline-color: currentColor;` | | `border-x-transparent` | `border-inline-color: transparent;` | | `border-x-black` | `border-inline-color: var(--color-black); /* #000 */` | | `border-x-white` | `border-inline-color: var(--color-white); /* #fff */` | ### Usage Examples #### Custom Property ```html

Custom property border

``` #### Arbitrary Value ```html

Arbitrary color border

``` #### Semantic Keywords ```html

Current color border

Transparent border

``` ``` -------------------------------- ### Logical end-start border radius utilities in CSS Source: https://tailwindcss.com/docs/border-radius CSS output for rounded-es-* utilities that apply border-end-start-radius using logical properties. Supports predefined sizes (xs through 4xl), none, full, custom properties, and arbitrary values. ```CSS border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */ ``` ```CSS border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */ ``` ```CSS border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */ ``` ```CSS border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */ ``` ```CSS border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */ ``` ```CSS border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */ ``` ```CSS border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ ``` ```CSS border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */ ``` ```CSS border-end-start-radius: 0; ``` ```CSS border-end-start-radius: calc(infinity * 1px); ``` ```CSS border-end-start-radius: var(); ``` ```CSS border-end-start-radius: ; ``` -------------------------------- ### Responsive align-items with breakpoint variants Source: https://tailwindcss.com/docs/align-items Prefix an align-items utility with a breakpoint variant like md: to apply the utility only at medium screen sizes and above. ```html

``` -------------------------------- ### Set custom minimum height values Source: https://tailwindcss.com/docs/min-height Use square bracket notation for arbitrary values or parentheses for CSS variables. ```html

``` ```html

``` -------------------------------- ### text-decoration-style Utilities Source: https://tailwindcss.com/docs/text-decoration-style Utilities for controlling the style of text decorations. ```APIDOC ## text-decoration-style Utilities ### Description Utilities for controlling the style of text decorations. ### Class Reference | Class | Styles | |---|---| | `decoration-solid` | `text-decoration-style: solid;` | | `decoration-double` | `text-decoration-style: double;` | | `decoration-dotted` | `text-decoration-style: dotted;` | | `decoration-dashed` | `text-decoration-style: dashed;` | | `decoration-wavy` | `text-decoration-style: wavy;` | ### Examples #### Basic Example Use utilities like `decoration-dotted` and `decoration-dashed` to change the text decoration style of an element: ```html

The quick brown fox...

``` #### Responsive Design Prefix a `text-decoration-style` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above: ```html

Lorem ipsum dolor sit amet...

``` Learn more about using variants in the [variants documentation](https://tailwindcss.com/docs/configuration#variants). ``` -------------------------------- ### Stacking multiple variants for complex conditions Source: https://tailwindcss.com/docs/hover-focus-and-other-states Combine multiple variants like dark mode, responsive breakpoints, and pseudo-classes by chaining them with colons. ```html ``` -------------------------------- ### Basic max-block-size with spacing scale Source: https://tailwindcss.com/docs/max-block-size Apply fixed maximum block sizes using spacing scale multipliers like max-block-80, max-block-64, etc. Each utility constrains the element's block size while allowing it to be smaller. ```HTML

max-block-80

max-block-64

max-block-48

max-block-40

max-block-32

``` -------------------------------- ### Custom transition with CSS variable Source: https://tailwindcss.com/docs/transition-property Use the transition-() syntax as shorthand for transition-[var()]. Automatically wraps the custom property name in the var() function. ```HTML ``` -------------------------------- ### Handle reduced motion for transition delay Source: https://tailwindcss.com/docs/transition-delay Conditionally apply transition delays using the motion-reduce variant for users who prefer reduced motion. ```html ``` -------------------------------- ### Tailwind CSS inset-bs- utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-block-start` property to a calculated percentage value based on a fraction. ```css inset-block-start: calc( * 100%); ``` -------------------------------- ### Set column gap with gap utilities Source: https://tailwindcss.com/docs/columns Use gap- utilities to control the spacing between columns. ```html

``` -------------------------------- ### Apply custom box shadow value Source: https://tailwindcss.com/docs/box-shadow Use shadow-[] syntax to set box shadow with completely custom values. Supports arbitrary values with rgba colors and pixel measurements. ```HTML

``` -------------------------------- ### Theme Customization Source: https://tailwindcss.com/docs/min-inline-size Explains how to customize the min-inline-size utilities by modifying the --spacing theme variable in your Tailwind CSS configuration. ```APIDOC ## Customizing Your Theme ### Description The `min-inline-` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme. ### Theme Configuration Example ```css @theme { --spacing: 1px; } ``` ### How It Works When you customize the `--spacing` variable, all `min-inline-` utilities will use the new spacing value in their calculations. For example, with `--spacing: 1px`, the utility `min-inline-24` will produce `min-inline-size: calc(1px * 24);` instead of the default calculation. ### Related Documentation Learn more about customizing the spacing scale in the theme variable documentation. ``` -------------------------------- ### Apply responsive font feature settings with Tailwind CSS Source: https://tailwindcss.com/docs/font-feature-settings Prefix a `font-feature-settings` utility with a breakpoint variant like `md:` to apply the utility only at specific screen sizes. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Using arbitrary custom values for positioning Source: https://tailwindcss.com/docs/top-right-bottom-left Use bracket notation inset-[] and top-[] to set position with completely custom CSS values not covered by standard utilities. ```html

``` -------------------------------- ### Tailwind CSS inset-s- utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-inline-start` property to a calculated percentage value based on a fraction. ```css inset-inline-start: calc( * 100%); ``` -------------------------------- ### Custom aspect ratio with bracket notation Source: https://tailwindcss.com/docs/aspect-ratio Set a custom aspect ratio using the aspect-[] syntax for arbitrary values. ```html

``` -------------------------------- ### Apply Responsive Table Border Styles with Tailwind CSS Source: https://tailwindcss.com/docs/border-collapse Prefix `border-collapse` utilities with breakpoint variants like `md:` to control table border behavior based on screen size, applying the utility only at medium screen sizes and above. ```html

``` -------------------------------- ### Select all text on click with select-all Source: https://tailwindcss.com/docs/user-select Use the `select-all` utility to automatically select all the text in an element when a user clicks. ```html

The quick brown fox jumps over the lazy dog.

``` -------------------------------- ### Using custom breakpoints in HTML Source: https://tailwindcss.com/docs/responsive-design Apply utilities using custom breakpoint names defined in your CSS theme configuration. ```html

``` -------------------------------- ### Configure Tailwind CSS Vite Plugin Source: https://tailwindcss.com/docs/installation/framework-guides/qwik Add the @tailwindcss/vite plugin to your Vite configuration file. The plugin must be included in the plugins array before other Qwik plugins. ```typescript import { defineConfig } from 'vite' import { qwikVite } from "@builder.io/qwik/optimizer"; import { qwikCity } from "@builder.io/qwik-city/vite"; // … import tailwindcss from '@tailwindcss/vite' export default defineConfig(({ command, mode }): UserConfig => { return { plugins: [ tailwindcss(), qwikCity(), qwikVite(), tsconfigPaths(), ], // … } }) ``` -------------------------------- ### Apply custom line height values Source: https://tailwindcss.com/docs/line-height Use square brackets for arbitrary values or parentheses for CSS variables to set specific line heights. ```html

Lorem ipsum dolor sit amet...

``` ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Apply responsive margin with Tailwind CSS Source: https://tailwindcss.com/docs/margin Use breakpoint variants to apply different margin values based on screen size. ```html

``` -------------------------------- ### Apply responsive list image styles in Tailwind CSS Source: https://tailwindcss.com/docs/list-style-image Prefix `list-style-image` utilities with breakpoint variants like `md:` to apply styles conditionally based on screen size. ```html

``` -------------------------------- ### Basic invert filter usage Source: https://tailwindcss.com/docs/filter-invert Apply standard inversion levels to elements using predefined utility classes. ```html

``` -------------------------------- ### Responsive backdrop invert variants Source: https://tailwindcss.com/docs/backdrop-filter-invert Prefix backdrop-invert utilities with breakpoint variants like md: to apply them only at specific screen sizes. ```html

``` -------------------------------- ### CLASS .max-h- Source: https://tailwindcss.com/docs/max-height Sets the maximum height using CSS keywords or viewport units. ```APIDOC ## CLASS .max-h- ### Description Utilities for setting max-height to fixed keywords like full, screen, min-content, or viewport-specific units (dvh, svh, lvh). ### Method CSS Utility ### Endpoint .max-h-none, .max-h-px, .max-h-full, .max-h-screen, .max-h-min, .max-h-max, .max-h-fit ### Parameters #### Path Parameters - **keyword** (string) - Required - The specific height keyword (e.g., 'full', 'screen', 'min', 'max', 'fit'). ### Request Example

Content limited to viewport height

### Response #### Success Response (200) - **max-height** (string) - The corresponding CSS value (e.g., 100%, 100vh, min-content). #### Response Example { "max-height": "100vh" } ``` -------------------------------- ### Responsive Align Content with Tailwind CSS Source: https://tailwindcss.com/docs/align-content Prefix an `align-content` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### bg-local Utility Source: https://tailwindcss.com/docs/background-attachment Scrolls the background image with the container and the viewport. The background image moves when the container scrolls. ```APIDOC ## bg-local ### Description Scrolls the background image with the container and the viewport. The background image moves along with the container's content. ### CSS Output ```css background-attachment: local; ``` ### Usage Example ```html

``` ### Use Cases - Background images that should move with scrollable containers - Maintaining visual consistency within scrollable elements - Creating contained background patterns ``` -------------------------------- ### Set viewport-based block size using Tailwind CSS Source: https://tailwindcss.com/docs/block-size Use viewport utilities to match the element's block size to the screen, including dynamic, large, and small viewport variants. ```html

``` ```html

``` -------------------------------- ### Applying color-scheme with dark mode variants Source: https://tailwindcss.com/docs/color-scheme Prefix a color-scheme utility with the dark: variant to conditionally apply it based on the user's system preference. ```html ``` -------------------------------- ### Arbitrary variant with at-rules Source: https://tailwindcss.com/docs/hover-focus-and-other-states Use at-rules like @supports in arbitrary variants without requiring the & placeholder, similar to CSS preprocessor nesting. ```HTML

``` -------------------------------- ### Apply basic z-index with Tailwind CSS Source: https://tailwindcss.com/docs/z-index Use `z-` utilities like `z-10` or `z-50` to control the stack order (three-dimensional positioning) of an element. ```html

``` -------------------------------- ### Match theme values in custom utility Source: https://tailwindcss.com/docs/adding-custom-styles Use --value(--theme-key-*) to resolve utility values against theme keys. Matches utilities like tab-2, tab-4, and tab-github. ```CSS @theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8; } @utility tab-* { tab-size: --value(--tab-size-*); } ``` -------------------------------- ### Responsive word-break with Tailwind Breakpoint Source: https://tailwindcss.com/docs/word-break Use breakpoint variants like md: to apply word-break utilities conditionally at specific screen sizes. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Set flex item basis with custom bracket values Source: https://tailwindcss.com/docs/flex-basis Use the basis-[] syntax to apply arbitrary custom values for flex-basis. ```html

``` -------------------------------- ### Responsive background-blend-mode Source: https://tailwindcss.com/docs/background-blend-mode Use breakpoint variants like md: to change the background blend mode at specific screen sizes. ```html

``` -------------------------------- ### Utility Classes: background-blend-mode Source: https://tailwindcss.com/docs/background-blend-mode A comprehensive list of utilities for setting the background-blend-mode CSS property on an element. ```APIDOC ## CSS background-blend-mode\n\n### Description\nUtilities for controlling how an element's background image should blend with its background color.\n\n### Method\nCSS Utility Class\n\n### Endpoint\n.bg-blend-{mode}\n\n### Parameters\n#### Utility Classes\n- **bg-blend-normal** - background-blend-mode: normal;\n- **bg-blend-multiply** - background-blend-mode: multiply;\n- **bg-blend-screen** - background-blend-mode: screen;\n- **bg-blend-overlay** - background-blend-mode: overlay;\n- **bg-blend-darken** - background-blend-mode: darken;\n- **bg-blend-lighten** - background-blend-mode: lighten;\n- **bg-blend-color-dodge** - background-blend-mode: color-dodge;\n- **bg-blend-color-burn** - background-blend-mode: color-burn;\n- **bg-blend-hard-light** - background-blend-mode: hard-light;\n- **bg-blend-soft-light** - background-blend-mode: soft-light;\n- **bg-blend-difference** - background-blend-mode: difference;\n- **bg-blend-exclusion** - background-blend-mode: exclusion;\n- **bg-blend-hue** - background-blend-mode: hue;\n- **bg-blend-saturation** - background-blend-mode: saturation;\n- **bg-blend-color** - background-blend-mode: color;\n- **bg-blend-luminosity** - background-blend-mode: luminosity;\n\n### Request Example\n

\n\n### Response\n#### Success Response (CSS Applied)\n- **background-blend-mode** (property) - The resulting CSS property applied to the element. ``` -------------------------------- ### Resolve utility ambiguities with arbitrary values Source: https://tailwindcss.com/docs/adding-custom-styles Use CSS data type hints like length: or color: when Tailwind cannot automatically determine the property for an arbitrary value. ```HTML

...

``` ```HTML

...

``` ```HTML

...

``` -------------------------------- ### Use custom perspective utility in markup Source: https://tailwindcss.com/docs/perspective Apply a custom perspective utility class that was defined in the theme configuration. ```html

``` -------------------------------- ### Responsive scroll-snap-stop variants Source: https://tailwindcss.com/docs/scroll-snap-stop Apply different scroll snap stop behaviors at specific breakpoints using variants like md:. ```html

``` -------------------------------- ### Correct mobile-first responsive text alignment Source: https://tailwindcss.com/docs/responsive-design Use unprefixed utilities for mobile styles and override them at larger breakpoints. This centers text on mobile and left-aligns it on screens 640px and wider. ```html

``` -------------------------------- ### Setting the Base Path for Source Detection in CSS Source: https://tailwindcss.com/docs/detecting-classes-in-source-files Define a custom base path for Tailwind's source scanning using the `source()` function, useful for monorepos or specific project structures. ```CSS @import "tailwindcss" source("../src"); ``` -------------------------------- ### Responsive background color with breakpoint variant in HTML Source: https://tailwindcss.com/docs/background-color Use breakpoint variants like md: to apply different background colors at different screen sizes for responsive design. ```html

``` -------------------------------- ### Responsive place-self alignment Source: https://tailwindcss.com/docs/place-self Apply different alignment values at specific breakpoints using variants like md:. This allows for layout adjustments across various screen sizes. ```html

``` -------------------------------- ### Basic hue-rotate with preset degrees Source: https://tailwindcss.com/docs/filter-hue-rotate Apply hue rotation to images using preset degree values like hue-rotate-15, hue-rotate-90, hue-rotate-180, and hue-rotate-270. ```html

``` -------------------------------- ### Responsive background-clip Source: https://tailwindcss.com/docs/background-clip Apply background-clip utilities conditionally at different breakpoints using responsive variants like md:. ```html

``` -------------------------------- ### Basic letter-spacing utilities in HTML Source: https://tailwindcss.com/docs/letter-spacing Use utilities like tracking-tight, tracking-normal, and tracking-wide to adjust the spacing between characters. ```html

The quick brown fox ...

``` -------------------------------- ### scroll-behavior Utilities Reference Source: https://tailwindcss.com/docs/scroll-behavior Complete reference for scroll-behavior CSS utility classes in Tailwind CSS. Includes scroll-auto for default scrolling and scroll-smooth for smooth scrolling animations. ```APIDOC # scroll-behavior Utilities ## Overview Utilities for controlling the scroll behavior of an element. ## Available Classes ### scroll-auto - **CSS**: `scroll-behavior: auto;` - **Description**: Reverts to the default browser scrolling behavior - **Use Case**: Reset smooth scrolling or use normal instant scrolling ### scroll-smooth - **CSS**: `scroll-behavior: smooth;` - **Description**: Enables smooth scrolling animation within an element - **Use Case**: Create smooth scroll animations for better user experience ## Usage Notes - The `scroll-behavior` property only affects scroll events that are triggered by the browser - These utilities can be combined with responsive modifiers (e.g., `md:scroll-auto`) ## Examples ### Using smooth scrolling ```html ``` ### Using normal scrolling with responsive modifier ```html ``` ``` -------------------------------- ### Centering items with justify-center and justify-center-safe Source: https://tailwindcss.com/docs/justify-content Use `justify-center` to center items along the main axis. `justify-center-safe` provides a fallback to `flex-start` when space is insufficient. ```html

``` ```html

``` -------------------------------- ### CSS for space-x-reverse Utility Source: https://tailwindcss.com/docs/margin This CSS defines the styling for the `space-x-reverse` utility, setting the `--tw-space-x-reverse` custom property to 1. ```css & > :not(:last-child)) { --tw-space-x-reverse: 1; } ``` -------------------------------- ### Generate all CSS variables with static option Source: https://tailwindcss.com/docs/theme Use the static theme option to ensure all defined CSS variables are generated in the final output regardless of whether they are used. ```css @import "tailwindcss";@theme static { --color-primary: var(--color-red-500); --color-secondary: var(--color-blue-500);} ``` -------------------------------- ### Apply whitespace-pre-wrap in HTML Source: https://tailwindcss.com/docs/white-space Use `whitespace-pre-wrap` to preserve newlines and spaces, allowing text to wrap normally. ```html

Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.

``` -------------------------------- ### Setting a custom border radius value in Tailwind CSS Source: https://tailwindcss.com/docs/border-radius Demonstrates how to use arbitrary value syntax to apply a custom border radius, such as `2vw`, to an element. ```html

``` -------------------------------- ### Apply SVG fill colors responsively in HTML Source: https://tailwindcss.com/docs/fill Use breakpoint variants like md: to change fill colors at specific screen sizes. ```html ``` -------------------------------- ### Basic background-clip usage Source: https://tailwindcss.com/docs/background-clip Apply border-box, padding-box, or content-box clipping to an element's background using bg-clip-border, bg-clip-padding, and bg-clip-content. ```html

``` -------------------------------- ### Define Custom Minimum Block Size with Arbitrary Values in Tailwind CSS Source: https://tailwindcss.com/docs/min-block-size Use the `min-block-[]` syntax for arbitrary values or `min-block-()` for CSS variables to set custom minimum block sizes. ```html

``` ```html

``` -------------------------------- ### Define Grid Columns with Tailwind CSS grid-cols- Source: https://tailwindcss.com/docs/grid-template-columns Use `grid-cols-` utilities to create grids with a specified number of equally sized columns. This is a common way to set up basic grid layouts. ```html

``` -------------------------------- ### Responsive text wrapping variants Source: https://tailwindcss.com/docs/text-wrap Apply text wrapping utilities at specific breakpoints using variant prefixes like md:. ```html

``` -------------------------------- ### UTILITY .border-x-{color}-{shade} Source: https://tailwindcss.com/docs/border-color Utility classes for setting the horizontal border color of an element. ```APIDOC ## UTILITY .border-x-{color}-{shade} ### Description Sets the horizontal border color (border-inline-color) of an element using the theme's color palette. ### Method UTILITY ### Endpoint .border-x-{color}-{shade} ### Parameters #### Path Parameters - **color** (string) - Required - The color family (e.g., blue, indigo, violet, purple, fuchsia, pink). - **shade** (string) - Required - The color intensity (50-950). ### Request Example

### Response #### Success Response (200) - **border-inline-color** (string) - The CSS property applied to the element. #### Response Example { "css": "border-inline-color: var(--color-indigo-600);" } ``` -------------------------------- ### Set fixed max-inline-size using spacing scale Source: https://tailwindcss.com/docs/max-inline-size Apply fixed maximum inline sizes using the standard spacing scale. These utilities use the max-inline- format. ```html

max-inline-96

max-inline-80

max-inline-64

max-inline-48

max-inline-40

max-inline-32

``` -------------------------------- ### Match Viewport Width with Tailwind CSS Source: https://tailwindcss.com/docs/width Apply `w-screen` to make an element span the entire width of the viewport. Other viewport units like `w-lvw`, `w-svw`, and `w-dvw` are also available. ```html

``` -------------------------------- ### Set Minimum Inline Size with Spacing Scale Source: https://tailwindcss.com/docs/min-inline-size Use `min-inline-` utilities to set a fixed minimum inline size based on the spacing scale. ```html

min-inline-80

min-inline-64

min-inline-48

min-inline-40

min-inline-32

min-inline-24

``` -------------------------------- ### Place Items Stretch with Tailwind CSS Source: https://tailwindcss.com/docs/place-items Use `place-items-stretch` to make grid items stretch along their grid areas on both axes. ```html

``` -------------------------------- ### Responsive invert filters Source: https://tailwindcss.com/docs/filter-invert Use breakpoint variants to apply or reset inversion filters at specific screen sizes. ```html

``` -------------------------------- ### Globally add main CSS file to Nuxt configuration Source: https://tailwindcss.com/docs/installation/framework-guides/nuxt Include the `app/assets/css/main.css` file in the `css` array of your `nuxt.config.ts` to apply it globally. ```typescript import tailwindcss from "@tailwindcss/vite"; export default defineNuxtConfig({ compatibilityDate: "2025-07-15", devtools: { enabled: true }, css: ['./app/assets/css/main.css'], vite: { plugins: [ tailwindcss(), ], }, }); ``` -------------------------------- ### Scale Utilities Reference Source: https://tailwindcss.com/docs/scale Complete reference of all available scale utility classes in Tailwind CSS, including uniform scaling, axis-specific scaling, and custom value syntax. ```APIDOC ## Scale Utilities ### Description Utilities for scaling elements using CSS transform scale properties. Supports uniform scaling, axis-specific scaling (x, y, z), negative values, and custom values. ### Available Classes #### Uniform Scaling - `scale-none` - `scale: none;` - `scale-` - `scale: % %;` - `-scale-` - `scale: calc(% * -1) calc(% * -1);` - `scale-()` - `scale: var() var();` - `scale-[]` - `scale: ;` #### X-Axis Scaling - `scale-x-` - `scale: % var(--tw-scale-y);` - `-scale-x-` - `scale: calc(% * -1) var(--tw-scale-y);` - `scale-x-()` - `scale: var() var(--tw-scale-y);` - `scale-x-[]` - `scale: var(--tw-scale-y);` #### Y-Axis Scaling - `scale-y-` - `scale: var(--tw-scale-x) %;` - `-scale-y-` - `scale: var(--tw-scale-x) calc(% * -1);` - `scale-y-()` - `scale: var(--tw-scale-x) var();` - `scale-y-[]` - `scale: var(--tw-scale-x) ;` #### Z-Axis Scaling (3D) - `scale-z-` - `scale: var(--tw-scale-x) var(--tw-scale-y) %;` - `-scale-z-` - `scale: var(--tw-scale-x) var(--tw-scale-y) calc(% * -1);` - `scale-z-()` - `scale: var(--tw-scale-x) var(--tw-scale-y) var();` - `scale-z-[]` - `scale: var(--tw-scale-x) var(--tw-scale-y) ;` #### 3D Scaling - `scale-3d` - `scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);` ``` -------------------------------- ### Apply whitespace-normal in HTML Source: https://tailwindcss.com/docs/white-space Use `whitespace-normal` to allow text to wrap normally, collapsing newlines and spaces. ```html

Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.

``` -------------------------------- ### Set fixed height using Tailwind CSS Source: https://tailwindcss.com/docs/height Use h- utilities to set fixed heights based on the spacing scale. ```html

h-96

h-80

h-64

h-48

h-40

h-32

h-24

``` -------------------------------- ### Apply Responsive Gradient Color Stops in Tailwind CSS Source: https://tailwindcss.com/docs/background-image Prefix a `background-image` utility with a breakpoint variant like `md:` to apply it only at specific screen sizes and above. ```html

``` -------------------------------- ### min-width Utilities Reference Source: https://tailwindcss.com/docs/min-width Complete reference of all available min-width utility classes in Tailwind CSS v4.2, including spacing-based, fractional, container scale, and custom value variants. ```APIDOC # min-width Utilities ## Overview Utilities for setting the minimum width of an element. ## Available Classes ### Spacing-Based Values - `min-w-` - `min-width: calc(var(--spacing) * );` ### Fractional Values - `min-w-` - `min-width: calc( * 100%);` ### Container Scale Sizes - `min-w-3xs` - `min-width: var(--container-3xs); /* 16rem (256px) */` - `min-w-2xs` - `min-width: var(--container-2xs); /* 18rem (288px) */` - `min-w-xs` - `min-width: var(--container-xs); /* 20rem (320px) */` - `min-w-sm` - `min-width: var(--container-sm); /* 24rem (384px) */` - `min-w-md` - `min-width: var(--container-md); /* 28rem (448px) */` - `min-w-lg` - `min-width: var(--container-lg); /* 32rem (512px) */` - `min-w-xl` - `min-width: var(--container-xl); /* 36rem (576px) */` - `min-w-2xl` - `min-width: var(--container-2xl); /* 42rem (672px) */` - `min-w-3xl` - `min-width: var(--container-3xl); /* 48rem (768px) */` - `min-w-4xl` - `min-width: var(--container-4xl); /* 56rem (896px) */` - `min-w-5xl` - `min-width: var(--container-5xl); /* 64rem (1024px) */` - `min-w-6xl` - `min-width: var(--container-6xl); /* 72rem (1152px) */` - `min-w-7xl` - `min-width: var(--container-7xl); /* 80rem (1280px) */` ### Keyword Values - `min-w-auto` - `min-width: auto;` - `min-w-px` - `min-width: 1px;` - `min-w-full` - `min-width: 100%;` - `min-w-screen` - `min-width: 100vw;` - `min-w-dvw` - `min-width: 100dvw;` - `min-w-dvh` - `min-width: 100dvh;` - `min-w-lvw` - `min-width: 100lvw;` - `min-w-lvh` - `min-width: 100lvh;` - `min-w-svw` - `min-width: 100svw;` - `min-w-svh` - `min-width: 100svh;` - `min-w-min` - `min-width: min-content;` - `min-w-max` - `min-width: max-content;` - `min-w-fit` - `min-width: fit-content;` ### Custom Values - `min-w-()` - `min-width: var();` - `min-w-[]` - `min-width: ;` ``` -------------------------------- ### Using Logical Properties for Text Alignment in Tailwind CSS Source: https://tailwindcss.com/docs/text-align Apply `text-start` or `text-end` utilities for text alignment that adapts to the text direction, useful for internationalization. ```html

فبدأت بالسير نحو الماء...

``` -------------------------------- ### Pink Background Color Utilities Source: https://tailwindcss.com/docs/background-color Utility classes for applying pink background colors using CSS variables. ```tailwind bg-pink-50 ``` ```css background-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */ ``` ```tailwind bg-pink-100 ``` ```css background-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */ ``` ```tailwind bg-pink-200 ``` ```css background-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */ ``` ```tailwind bg-pink-300 ``` ```css background-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */ ``` ```tailwind bg-pink-400 ``` ```css background-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */ ``` ```tailwind bg-pink-500 ``` ```css background-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */ ``` ```tailwind bg-pink-600 ``` ```css background-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ ``` ```tailwind bg-pink-700 ``` ```css background-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ ``` ```tailwind bg-pink-800 ``` ```css background-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ ``` ```tailwind bg-pink-900 ``` ```css background-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ ``` ```tailwind bg-pink-950 ``` ```css background-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ ``` -------------------------------- ### Configure the Vite plugin Source: https://tailwindcss.com/docs/installation Register the Tailwind CSS plugin in your Vite configuration file. ```typescript import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],}) ``` -------------------------------- ### CLASS .accessibility Source: https://tailwindcss.com/docs/display Utilities for controlling the visibility of elements for screen readers. ```APIDOC ## CLASS .accessibility ### Description Utilities to hide elements visually while keeping them accessible to screen readers. ### Parameters #### Utility Classes - **sr-only** - position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; - **not-sr-only** - position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; ### Request Example ### Response #### Success Response (CSS) - **position** (property) - absolute (for sr-only) or static (for not-sr-only). ``` -------------------------------- ### Responsive hue-rotate with breakpoint variant Source: https://tailwindcss.com/docs/filter-hue-rotate Prefix hue-rotate utilities with breakpoint variants like md: to apply the utility only at specific screen sizes. ```html

``` -------------------------------- ### Set inline size using container scale Source: https://tailwindcss.com/docs/inline-size Use utilities like inline-sm and inline-xl to set an element to a fixed inline size based on the container scale. ```html

inline-xl

inline-lg

inline-md

inline-sm

inline-xs

inline-2xs

inline-3xs

``` -------------------------------- ### Apply Inline Logical Margin Properties with Tailwind CSS Source: https://tailwindcss.com/docs/margin Use `ms-` and `me-` utilities to set `margin-inline-start` and `margin-inline-end`, which adapt to text direction. ```html

ms-8

me-8

ms-8

me-8

``` -------------------------------- ### Set Background Image with bg-[] Source: https://tailwindcss.com/docs/background-image Use the `bg-[]` syntax to set a custom background image URL for an element. ```html

``` -------------------------------- ### object-none for original size Source: https://tailwindcss.com/docs/object-fit Use object-none to display element content at its original size, ignoring the container dimensions. ```HTML

``` -------------------------------- ### Applying responsive text decoration with Tailwind CSS Source: https://tailwindcss.com/docs/text-decoration-line Prefix a `text-decoration-line` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above. ```html ``` -------------------------------- ### Adjust outline-color transitions in HTML Source: https://tailwindcss.com/docs/upgrade-guide Ensure outline colors are set unconditionally or for both states to prevent unexpected transitions from default colors. ```html ``` -------------------------------- ### Apply basic background repeat with Tailwind CSS Source: https://tailwindcss.com/docs/background-repeat Use the `bg-repeat` utility to repeat the background image both vertically and horizontally. ```html

``` -------------------------------- ### Responsive mask-composite variants Source: https://tailwindcss.com/docs/mask-composite Prefix a mask-composite utility with a breakpoint variant like md: to apply it at specific screen sizes. This allows for responsive mask behavior. ```html

``` -------------------------------- ### Set Custom Background Position with Arbitrary Values Source: https://tailwindcss.com/docs/background-position Use the `bg-position-[]` syntax to set a custom background position. ```html

``` -------------------------------- ### Stack arbitrary variants with built-in variants Source: https://tailwindcss.com/docs/hover-focus-and-other-states Arbitrary variants can be combined with built-in variants like active to create more specific selectors. ```HTML

{item}

``` -------------------------------- ### Distributing space between items with justify-between Source: https://tailwindcss.com/docs/justify-content Use the `justify-between` utility to distribute items with equal space between them along the main axis. ```html

``` -------------------------------- ### Set Percentage-Based Maximum Height with Tailwind CSS Source: https://tailwindcss.com/docs/max-height Apply `max-h-full` or `max-h-` utilities to give an element a percentage-based maximum height. ```html

max-h-9/10

max-h-3/4

max-h-1/2

max-h-1/4

max-h-full

``` -------------------------------- ### Apply box shadow using CSS custom property Source: https://tailwindcss.com/docs/box-shadow Use shadow-() syntax as shorthand for shadow-[var()]. The var() function is added automatically. ```HTML

``` -------------------------------- ### Place Items Center with Tailwind CSS Source: https://tailwindcss.com/docs/place-items Use `place-items-center` to position grid items in the center of their grid areas on both axes. ```html

``` -------------------------------- ### Basic background-origin usage with HTML Source: https://tailwindcss.com/docs/background-origin Apply background-origin utilities to control where backgrounds render relative to borders, padding, and content. Use bg-origin-border, bg-origin-padding, or bg-origin-content classes on elements with background images. ```html

``` -------------------------------- ### Divider Styles for Child Elements Source: https://tailwindcss.com/docs/border-style Demonstrates how to use divide utilities like divide-dashed and divide-dotted to control the border style between child elements in a container. ```APIDOC ## Setting Divider Styles Between Child Elements ### Description Use divide utilities to control the border style between child elements. ### Example ```html

``` ### Usage - Combine divide utilities with divide-width utilities (e.g., `divide-x-3`) - `divide-solid` applies solid borders between children - `divide-dashed` applies dashed borders between children - `divide-dotted` applies dotted borders between children - `divide-double` applies double borders between children - Borders are applied to all child elements except the last one ``` -------------------------------- ### Use negative order values in HTML Source: https://tailwindcss.com/docs/order Prefix the utility with a dash to apply negative order values. ```html

``` -------------------------------- ### Responsive caption alignment Source: https://tailwindcss.com/docs/caption-side Prefix a caption-side utility with a breakpoint variant like md: to apply the utility at specific screen sizes. ```html ``` -------------------------------- ### Match arbitrary values in custom utility Source: https://tailwindcss.com/docs/adding-custom-styles Use --value([{type}]) with square brackets to support arbitrary values. Matches utilities like tab-[1] and tab-[76]. Available types include color, length, percentage, integer, and others. ```CSS @utility tab-* { tab-size: --value([integer]); } ``` -------------------------------- ### Custom backdrop-hue-rotate with CSS variables Source: https://tailwindcss.com/docs/backdrop-filter-hue-rotate Use the backdrop-hue-rotate-() syntax as shorthand for backdrop-hue-rotate-[var()] to reference CSS custom properties. ```html

``` -------------------------------- ### Style File Input Buttons with Tailwind CSS Source: https://tailwindcss.com/docs/hover-focus-and-other-states Customize the appearance of the button within file input elements using the `file` variant. ```html ``` -------------------------------- ### Inline Grid Display HTML Source: https://tailwindcss.com/docs/display Creates an inline grid container using the inline-grid utility. Flows with surrounding content while maintaining grid layout structure. ```html 01 02 03 04 05 06 01 02 03 04 05 06 ``` -------------------------------- ### Set a custom list image using Tailwind CSS Source: https://tailwindcss.com/docs/list-style-image Use the `list-image-[]` syntax to apply a specific image URL as the list marker. ```html

5 cups chopped Porcini mushrooms

``` -------------------------------- ### Set max-width using custom values Source: https://tailwindcss.com/docs/max-width Use square brackets for arbitrary values or parentheses for CSS variables. ```html

``` ```html

``` -------------------------------- ### Collapse table row with collapse utility Source: https://tailwindcss.com/docs/visibility Use `collapse` on table rows to hide them without affecting the size of other rows and columns, enabling dynamic row/column toggling without layout shifts. ```HTML

Invoice #	Client	Amount
#100	Pendant Publishing	$2,000.00
#101	Kruger Industrial Smoothing	$545.00
#102	J. Peterman	$10,000.25

``` -------------------------------- ### Custom min-width values Source: https://tailwindcss.com/docs/min-width Use min-w-[value] syntax for arbitrary custom values or min-w-(--property) for CSS custom properties. The latter automatically wraps the property in var(). ```html

``` ```html

``` -------------------------------- ### Apply Responsive Underline Offset with Tailwind CSS Source: https://tailwindcss.com/docs/text-underline-offset Prefix `text-underline-offset` utilities with breakpoint variants to apply them conditionally based on screen size. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Basic backdrop-hue-rotate with predefined values Source: https://tailwindcss.com/docs/backdrop-filter-hue-rotate Apply backdrop hue rotation using utility classes like backdrop-hue-rotate-90, backdrop-hue-rotate-180, and backdrop-hue-rotate-270 to rotate the hue of an element's backdrop. ```html

``` -------------------------------- ### Controlling scroll snap position stops Source: https://tailwindcss.com/docs/scroll-snap-stop Use snap-always to force a stop at every element or snap-normal to allow skipping past snap points. ```html

``` ```html

``` -------------------------------- ### Pink Border Top Color Utilities Source: https://tailwindcss.com/docs/border-color Utilities for applying pink shades to the top border. ```css border-t-pink-50 ``` ```css border-top-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */ ``` ```css border-t-pink-100 ``` ```css border-top-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */ ``` ```css border-t-pink-200 ``` ```css border-top-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */ ``` ```css border-t-pink-300 ``` ```css border-top-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */ ``` ```css border-t-pink-400 ``` ```css border-top-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */ ``` ```css border-t-pink-500 ``` ```css border-top-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */ ``` ```css border-t-pink-600 ``` ```css border-top-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ ``` ```css border-t-pink-700 ``` ```css border-top-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ ``` ```css border-t-pink-800 ``` ```css border-top-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ ``` ```css border-t-pink-900 ``` ```css border-top-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ ``` ```css border-t-pink-950 ``` ```css border-top-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ ``` -------------------------------- ### Use Custom Font Utility in HTML Source: https://tailwindcss.com/docs/theme This HTML snippet demonstrates how to apply the newly defined `font-script` utility class in your markup. ```html

This will use the Great Vibes font family.

``` -------------------------------- ### Custom sepia value with square bracket syntax Source: https://tailwindcss.com/docs/filter-sepia Use the sepia-[] syntax to apply a completely custom sepia filter value not covered by predefined utilities. ```html

``` -------------------------------- ### Tailwind CSS inset-s-px utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-inline-start` property to a fixed value of 1 pixel. ```css inset-inline-start: 1px; ``` -------------------------------- ### Apply drop shadow utilities Source: https://tailwindcss.com/docs/filter-drop-shadow Use utilities like `drop-shadow-sm` and `drop-shadow-xl` to add a drop shadow to an element. This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use box shadow instead. ```html ``` -------------------------------- ### Migrate outline-none to outline-hidden in HTML Source: https://tailwindcss.com/docs/upgrade-guide Use outline-hidden to maintain the accessible invisible outline behavior from v3. ```HTML ``` -------------------------------- ### Undo line clamping Source: https://tailwindcss.com/docs/line-clamp Use line-clamp-none to reset the display and overflow properties to their defaults. ```html

``` -------------------------------- ### Basic aspect ratio with aspect-3/2 Source: https://tailwindcss.com/docs/aspect-ratio Apply a specific aspect ratio to an image element using the aspect- utility class. ```html

``` -------------------------------- ### Apply transition delay using Tailwind CSS Source: https://tailwindcss.com/docs/transition-delay Use utilities like delay-150 and delay-700 to set the transition delay of an element in milliseconds. ```html ``` -------------------------------- ### Responsive Caret Color in HTML Source: https://tailwindcss.com/docs/caret-color Applies different caret colors based on screen size using responsive variants. ```html ``` -------------------------------- ### Apply uniform padding in Tailwind CSS Source: https://tailwindcss.com/docs/padding Use p-{number} utilities to control the padding on all sides of an element. ```html

p-8

``` -------------------------------- ### Rose Text Shadow Utilities Source: https://tailwindcss.com/docs/text-shadow Utility classes and CSS variable mappings for rose text shadows. ```css text-shadow-rose-50 ``` ```css --tw-text-shadow-color var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */ ``` ```css text-shadow-rose-100 ``` ```css --tw-text-shadow-color var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */ ``` ```css text-shadow-rose-200 ``` ```css --tw-text-shadow-color var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */ ``` ```css text-shadow-rose-300 ``` ```css --tw-text-shadow-color var(--color-rose-300); /* oklch(81% 0.117 11.638) */ ``` ```css text-shadow-rose-400 ``` ```css --tw-text-shadow-color var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */ ``` ```css text-shadow-rose-500 ``` ```css --tw-text-shadow-color var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */ ``` ```css text-shadow-rose-600 ``` ```css --tw-text-shadow-color var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */ ``` ```css text-shadow-rose-700 ``` ```css --tw-text-shadow-color var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */ ``` ```css text-shadow-rose-800 ``` ```css --tw-text-shadow-color var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */ ``` ```css text-shadow-rose-900 ``` ```css --tw-text-shadow-color var(--color-rose-900); /* oklch(41% 0.159 10.272) */ ``` ```css text-shadow-rose-950 ``` ```css --tw-text-shadow-color var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */ ``` -------------------------------- ### Basic backdrop opacity usage Source: https://tailwindcss.com/docs/backdrop-filter-opacity Use utilities like backdrop-opacity-50 to control the opacity of all backdrop filters applied to an element. ```html

``` -------------------------------- ### Translate on both axes using spacing scale Source: https://tailwindcss.com/docs/translate Apply translate utilities like translate-2, translate-8, and -translate-6 to move elements on both x and y axes based on the spacing scale. ```html

``` -------------------------------- ### Extend Preflight with @layer base Source: https://tailwindcss.com/docs/preflight Add custom base styles to the base layer to ensure they are properly ordered with Tailwind's resets. ```css @layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } a { color: var(--color-blue-600); text-decoration-line: underline; }} ``` -------------------------------- ### Set Font Size and Line Height Simultaneously in HTML Source: https://tailwindcss.com/docs/font-size Combine font size and line height utilities using the text-size/line-height syntax. This allows for simultaneous control over both properties. ```html

So I started to walk into the water...

``` -------------------------------- ### Custom border width with arbitrary values Source: https://tailwindcss.com/docs/border-width Use the border-[] syntax to set border width with completely custom values not covered by standard utilities. ```html

``` -------------------------------- ### Responsive Backdrop Grayscale Source: https://tailwindcss.com/docs/backdrop-filter-grayscale Prefix a backdrop-filter: grayscale() utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above. ```html

``` -------------------------------- ### Mirror and scale elements using negative values in Tailwind CSS Source: https://tailwindcss.com/docs/scale Use negative scale utilities to flip an element and scale it by a percentage. ```html

``` -------------------------------- ### Apply blur filters to elements Source: https://tailwindcss.com/docs/filter-blur Use predefined blur utilities like blur-sm or blur-lg to apply Gaussian blur effects. ```html

``` -------------------------------- ### Apply Background Position with CSS Variables Source: https://tailwindcss.com/docs/background-position Use the `bg-position-()` syntax to apply a CSS variable for background position. ```html

``` -------------------------------- ### Enable Resizing in All Directions with HTML Source: https://tailwindcss.com/docs/resize Use the `resize` utility class to make an HTML element, such as a textarea, resizable both horizontally and vertically. ```html ``` -------------------------------- ### Tailwind CSS inset-bs-px utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-block-start` property to a fixed value of 1 pixel. ```css inset-block-start: 1px; ``` -------------------------------- ### Apply custom flex-shrink values in Tailwind CSS Source: https://tailwindcss.com/docs/flex-shrink Use arbitrary value syntax or CSS variable shorthand for specific shrink factors. ```html ``` ```html

``` -------------------------------- ### Allow flex items to grow with grow class Source: https://tailwindcss.com/docs/flex-grow Use the grow class to allow a flex item to expand and fill available space within a flex container. ```html

``` -------------------------------- ### Set custom block size using Tailwind CSS Source: https://tailwindcss.com/docs/block-size Use square brackets for arbitrary values or parentheses for CSS variables. ```html

``` ```html

``` -------------------------------- ### Customizing min-width Theme Source: https://tailwindcss.com/docs/min-width Explains how to customize the min-width utilities by modifying the --spacing theme variable in your Tailwind CSS configuration. ```APIDOC ## Customizing Your Theme ### Description The `min-w-` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme. ### Theme Configuration ```css @theme { --spacing: 1px; } ``` ### Customization Options You can customize: - The base spacing unit used by numeric min-width utilities - Container scale sizes for min-w-sm, min-w-lg, etc. - Add new custom min-width values ### Example: Custom Spacing ```css @theme { --spacing: 0.25rem; /* 4px base unit */ } ``` With this configuration: - `min-w-1` = 0.25rem (4px) - `min-w-4` = 1rem (16px) - `min-w-16` = 4rem (64px) Learn more about customizing the spacing scale in the theme variable documentation. ``` -------------------------------- ### Responsive text decoration color Source: https://tailwindcss.com/docs/text-decoration-color Prefix a text decoration color utility with a breakpoint variant like `md:` to apply the utility only at medium screen sizes and above. This allows for responsive design adjustments. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Handle gradient variants in HTML Source: https://tailwindcss.com/docs/upgrade-guide In v4, variants preserve gradient values; use via-none to explicitly unset three-stop gradients. ```HTML

``` ```HTML

``` -------------------------------- ### Enable PostCSS Loader in Webpack Encore Source: https://tailwindcss.com/docs/installation/framework-guides/symfony Configure webpack.config.js to enable PostCSS processing for stylesheets. ```javascript Encore .enablePostCssLoader(); ``` -------------------------------- ### Apply Custom Numeric Backdrop Blur Source: https://tailwindcss.com/docs/backdrop-filter-blur Set a custom backdrop blur value using arbitrary values with the `backdrop-blur-[]` syntax. ```html

``` -------------------------------- ### Customize drop shadow with theme variables Source: https://tailwindcss.com/docs/filter-drop-shadow Define custom drop shadow values using --drop-shadow-* theme variables in @theme blocks. After customization, the new utility class becomes available in markup. ```css @theme { --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); } ``` -------------------------------- ### Add Tailwind watcher to dev.exs Source: https://tailwindcss.com/docs/installation/framework-guides/phoenix Enable the Tailwind watcher in `config/dev.exs` to automatically recompile CSS during development. ```Elixir watchers: [ # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]}, tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]} ] ``` -------------------------------- ### mask-cover - Fill Container with Cropping Source: https://tailwindcss.com/docs/mask-size Use the mask-cover utility to scale the mask image until it fills the mask layer, cropping the image if necessary to maintain aspect ratio. ```APIDOC ## mask-cover ### Description Scales the mask image to fill the entire mask layer, cropping the image if needed to maintain proper coverage. ### CSS Output ```css mask-size: cover; ``` ### Example Usage ```html

``` ### Use Cases - Creating full-coverage mask effects - Ensuring mask completely fills the container - When cropping of mask image is acceptable ``` -------------------------------- ### Use custom text color values Source: https://tailwindcss.com/docs/text-color Apply arbitrary hex codes or CSS variables directly using square brackets or parentheses syntax. ```html

Lorem ipsum dolor sit amet...

``` ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Basic place-self alignment utilities Source: https://tailwindcss.com/docs/place-self Control how individual grid or flex items are justified and aligned simultaneously. The auto value inherits alignment from the container's place-items property. ```html

``` ```html

``` -------------------------------- ### Horizontal scroll snapping with snap-x Source: https://tailwindcss.com/docs/scroll-snap-type Enable horizontal scroll snapping on a container with snap-center alignment on child elements. Child elements must also have snap alignment utilities for snapping to work. ```html

``` -------------------------------- ### Apply Basic Outline Colors with Tailwind CSS Source: https://tailwindcss.com/docs/outline-color Use predefined color utilities like 'outline-blue-500' to set the outline color of an element. Combine with 'outline-2' and 'outline-offset-2' for a visible outline. ```html ``` -------------------------------- ### place-content-end Grid Layout Source: https://tailwindcss.com/docs/place-content Packs grid items against the end of both inline and block axes using the place-content-end class. ```HTML

``` -------------------------------- ### Match viewport inline size Source: https://tailwindcss.com/docs/inline-size Use the inline-screen utility to make an element span the entire inline size of the viewport. ```html

``` -------------------------------- ### Disable default theme with initial namespace Source: https://tailwindcss.com/docs/theme Set the global theme variable namespace to initial to completely disable default values and use only custom definitions. ```css @import "tailwindcss";@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);} ``` -------------------------------- ### Set custom will-change value with arbitrary syntax Source: https://tailwindcss.com/docs/will-change Use the will-change-[] syntax to apply custom will-change values not covered by predefined utilities. ```html

``` -------------------------------- ### text-align Utilities Reference Source: https://tailwindcss.com/docs/text-align Complete reference of all text-align utility classes available in Tailwind CSS. These utilities provide straightforward control over text alignment with support for standard and logical property values. ```APIDOC ## Text Alignment Utilities ### Description Utilities for controlling the alignment of text in HTML elements using CSS text-align property. ### Available Classes | Class | CSS Property | Purpose | |-------|--------------|----------| | `text-left` | `text-align: left;` | Align text to the left | | `text-center` | `text-align: center;` | Center align text | | `text-right` | `text-align: right;` | Align text to the right | | `text-justify` | `text-align: justify;` | Justify text alignment | | `text-start` | `text-align: start;` | Logical property - aligns to start based on text direction | | `text-end` | `text-align: end;` | Logical property - aligns to end based on text direction | ``` -------------------------------- ### Apply inset box shadows with Tailwind CSS Source: https://tailwindcss.com/docs/box-shadow Use `inset-shadow-xs` and `inset-shadow-sm` utilities to apply an inset box shadow to an element. ```html

``` -------------------------------- ### Define custom utilities with @utility Source: https://tailwindcss.com/docs/adding-custom-styles Register custom simple, complex, or functional utilities using the @utility directive and the --value() function. ```CSS @utility content-auto { content-visibility: auto;} ``` ```HTML

``` ```HTML

``` ```CSS @utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }} ``` ```CSS @utility tab-* { tab-size: --value(--tab-size-*);} ``` -------------------------------- ### Responsive grid rows in Tailwind CSS Source: https://tailwindcss.com/docs/grid-template-rows Prefix grid-template-rows utilities with breakpoint variants to apply them at specific screen sizes. ```html

``` -------------------------------- ### place-content-around Grid Layout Source: https://tailwindcss.com/docs/place-content Distributes grid items with equal space around each row and column on both axes using place-content-around. ```HTML

``` -------------------------------- ### Basic mask-mode usage with gradients Source: https://tailwindcss.com/docs/mask-mode Apply mask-alpha or mask-luminance utilities with radial gradient masks to control element visibility. Use grayscale colors with mask-luminance for predictable results. ```html

``` -------------------------------- ### Backdrop contrast with CSS custom property Source: https://tailwindcss.com/docs/backdrop-filter-contrast Use the backdrop-contrast-() syntax as shorthand for backdrop-contrast-[var()], which automatically wraps the custom property in the var() function. ```html

``` -------------------------------- ### Apply Responsive Font Smoothing with Tailwind CSS Source: https://tailwindcss.com/docs/font-smoothing Prefix font smoothing utilities with a breakpoint variant like `md:` to apply them only at medium screen sizes and above. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Customize theme timing functions Source: https://tailwindcss.com/docs/transition-timing-function Define custom timing functions in the @theme block to create new ease utilities like ease-in-expo available throughout your project. ```css @theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); } ``` -------------------------------- ### background-size Utility Classes Reference Source: https://tailwindcss.com/docs/background-size Complete reference of all available background-size utility classes in Tailwind CSS v4.2, including predefined classes and custom value syntax for controlling background image sizing. ```APIDOC ## background-size Utilities ### Description Utilities for controlling the background size of an element's background image. ### Available Classes | Class | CSS Output | |-------|------------| | `bg-auto` | `background-size: auto;` | | `bg-cover` | `background-size: cover;` | | `bg-contain` | `background-size: contain;` | | `bg-size-()` | `background-size: var();` | | `bg-size-[]` | `background-size: ;` | ### Usage Examples #### Filling the container Use the `bg-cover` utility to scale the background image until it fills the background layer, cropping the image if needed: ```html

``` #### Filling without cropping Use the `bg-contain` utility to scale the background image to the outer edges without cropping or stretching: ```html

``` #### Using the default size Use the `bg-auto` utility to display the background image at its default size: ```html

``` #### Using a custom value Use the `bg-size-[]` syntax to set the background size based on a completely custom value: ```html

``` #### Using CSS variables For CSS variables, use the `bg-size-()` syntax, which is shorthand for `bg-size-[var()]`: ```html

``` #### Responsive design Prefix a `background-size` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above: ```html

``` ``` -------------------------------- ### Control Implicit Grid Column Size with Tailwind CSS Source: https://tailwindcss.com/docs/grid-auto-columns Use utilities like `auto-cols-min` and `auto-cols-max` to define the size of implicitly created grid columns. ```html

``` -------------------------------- ### Custom and CSS variable line-clamp values Source: https://tailwindcss.com/docs/line-clamp Use square brackets for arbitrary values or parentheses for CSS variables. ```html

Lorem ipsum dolor sit amet...

``` ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Custom backdrop-hue-rotate with bracket notation Source: https://tailwindcss.com/docs/backdrop-filter-hue-rotate Use the backdrop-hue-rotate-[] syntax to set backdrop hue rotation with completely custom values like radians or other units. ```html

``` -------------------------------- ### Share theme variables across projects Source: https://tailwindcss.com/docs/theme Define theme variables in a standalone CSS file and import it into other project stylesheets to share design tokens. ```css @theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);} ``` ```css @import "tailwindcss";@import "../brand/theme.css"; ``` -------------------------------- ### Configure Vite Plugin Source: https://tailwindcss.com/docs/installation/framework-guides/sveltekit Register the @tailwindcss/vite plugin in the Vite configuration file. ```typescript import { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), sveltekit(), ],}); ``` -------------------------------- ### Responsive border styles Source: https://tailwindcss.com/docs/border-style Use breakpoint variants like md: to change the border style based on the screen size. ```html

``` -------------------------------- ### Render avatar list in a loop with Svelte Source: https://tailwindcss.com/docs/styling-with-utility-classes Use a loop to render repeated elements from a data source, eliminating duplication. The class list is authored once and applied to each iteration, reducing code repetition. ```svelte

Contributors

204

{#each contributors as user} {user.handle}

{/each}

+ 198 others

``` -------------------------------- ### Zinc Text Shadow Utilities Source: https://tailwindcss.com/docs/text-shadow Utility classes and CSS variable mappings for zinc text shadows. ```css text-shadow-zinc-50 ``` ```css --tw-text-shadow-color var(--color-zinc-50); /* oklch(98.5% 0 0) */ ``` ```css text-shadow-zinc-100 ``` ```css --tw-text-shadow-color var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */ ``` ```css text-shadow-zinc-200 ``` ```css --tw-text-shadow-color var(--color-zinc-200); /* oklch(92% 0.004 286.32) */ ``` ```css text-shadow-zinc-300 ``` ```css --tw-text-shadow-color var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */ ``` ```css text-shadow-zinc-400 ``` ```css --tw-text-shadow-color var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */ ``` ```css text-shadow-zinc-500 ``` ```css --tw-text-shadow-color var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */ ``` ```css text-shadow-zinc-600 ``` ```css --tw-text-shadow-color var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */ ``` ```css text-shadow-zinc-700 ``` ```css --tw-text-shadow-color var(--color-zinc-700); /* oklch(37% 0.013 285.805) */ ``` ```css text-shadow-zinc-800 ``` ```css --tw-text-shadow-color var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */ ``` -------------------------------- ### Responsive vertical alignment with Tailwind CSS Source: https://tailwindcss.com/docs/vertical-align Prefix a vertical-align utility with a breakpoint variant like md: to apply the utility only at medium screen sizes and above. ```html ``` -------------------------------- ### Set Fixed Minimum Block Size with Tailwind CSS Source: https://tailwindcss.com/docs/min-block-size Use `min-block-` utilities to set a fixed minimum block size based on the spacing scale defined in your theme. ```html

min-block-80

min-block-64

min-block-48

min-block-40

min-block-32

``` -------------------------------- ### Add Linear Gradients Source: https://tailwindcss.com/docs/background-image Apply linear gradients using directional utilities like `bg-linear-to-r` or angle-based `bg-linear-` combined with color stop utilities. ```html

``` -------------------------------- ### Space Distribution Utilities Source: https://tailwindcss.com/docs/justify-content Utilities for distributing space between, around, or evenly across items in a container. ```APIDOC ## justify-between, justify-around, justify-evenly\n\n### Description\nUtilities to justify items along the container's main axis with various spacing distributions.\n\n### Request Example\n```html\n

...

\n``` ``` -------------------------------- ### Tailwind CSS -inset-s-px utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-inline-start` property to a fixed negative value of 1 pixel. ```css inset-inline-start: -1px; ``` -------------------------------- ### Customizing accent color in theme Source: https://tailwindcss.com/docs/accent-color Use the `--color-*` theme variables to customize the color utilities in your project. ```css @theme { --color-regal-blue: #243c5a; } ``` -------------------------------- ### CSS for border-sky-600 utility Source: https://tailwindcss.com/docs/border-color Applies the `border-sky-600` utility class to set the border color using a CSS variable. ```css border-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */ ``` -------------------------------- ### Style optional input with optional variant Source: https://tailwindcss.com/docs/hover-focus-and-other-states Apply styles to an input when it is optional. ```HTML ``` -------------------------------- ### mask-cover utility for filling container Source: https://tailwindcss.com/docs/mask-size Scales the mask image to fill the mask layer, cropping the image if necessary. Use when you want the mask to completely cover the container. ```html

``` -------------------------------- ### Gray Background Color Utilities Source: https://tailwindcss.com/docs/background-color Utility classes for applying gray background colors using CSS variables. ```tailwind bg-gray-50 ``` ```css background-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ ``` ```tailwind bg-gray-100 ``` ```css background-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ ``` ```tailwind bg-gray-200 ``` ```css background-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ ``` ```tailwind bg-gray-300 ``` ```css background-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ ``` ```tailwind bg-gray-400 ``` ```css background-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ ``` ```tailwind bg-gray-500 ``` ```css background-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ ``` ```tailwind bg-gray-600 ``` ```css background-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ ``` ```tailwind bg-gray-700 ``` ```css background-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ ``` ```tailwind bg-gray-800 ``` ```css background-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ ``` -------------------------------- ### Apply custom container sizes in HTML with Tailwind CSS Source: https://tailwindcss.com/docs/responsive-design Apply a custom container size variant, like `@8xl`, to elements within an `@container` parent to create responsive layouts based on the container's width. ```html

``` -------------------------------- ### Basic sepia filter classes Source: https://tailwindcss.com/docs/filter-sepia Apply sepia effects using predefined utility classes like sepia-0, sepia-50, and sepia to control the intensity of the sepia filter on images or elements. ```html

``` -------------------------------- ### Use custom aspect ratio utility in markup Source: https://tailwindcss.com/docs/aspect-ratio Apply a custom aspect ratio utility defined in the theme configuration to an element. ```html ``` -------------------------------- ### UTILITY list-style-type Source: https://tailwindcss.com/docs/list-style-type Utilities for controlling the marker style of a list. Supports standard keywords, arbitrary values, and CSS variables. ```APIDOC ## UTILITY list-style-type ### Description Utilities for controlling the marker style of a list. ### Method CSS Utility Class ### Endpoint .list-{type} ### Parameters #### Utility Classes - **list-disc** - Sets list-style-type to disc. - **list-decimal** - Sets list-style-type to decimal. - **list-none** - Sets list-style-type to none. - **list-()** - Sets list-style-type to a CSS variable. - **list-[]** - Sets list-style-type to an arbitrary value. ### Request Example ```html

Now this is a story all about how, my life got flipped-turned upside down
And I'd like to take a minute just sit right there

``` ### Response #### Success Response (CSS Output) - **list-style-type** (string) - The CSS property applied to the element. #### Response Example ```css .list-disc { list-style-type: disc; } ``` ### Custom Values #### Arbitrary Value Example ```html

``` #### CSS Variable Example ```html

``` ### Responsive Design Prefix a utility with a breakpoint variant like `md:` to apply it at specific screen sizes. ```html

``` ``` -------------------------------- ### CSS for border-indigo-400 utility Source: https://tailwindcss.com/docs/border-color Applies the `border-indigo-400` utility class to set the border color using a CSS variable. ```css border-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ ``` -------------------------------- ### scroll-padding Utilities Reference Source: https://tailwindcss.com/docs/scroll-padding Complete reference for all scroll-padding utility classes in Tailwind CSS. Includes directional variants (scroll-p, scroll-px, scroll-py, scroll-ps, scroll-pe, scroll-pbs, scroll-pbe, scroll-pt, scroll-pr, scroll-pb, scroll-pl) with numeric, custom property, and arbitrary value modifiers. ```APIDOC # scroll-padding Utilities ## Description Utilities for controlling an element's scroll offset within a snap container. ## Utility Classes ### All Directions - `scroll-p-` - `scroll-padding: calc(var(--spacing) * );` - `-scroll-p-` - `scroll-padding: calc(var(--spacing) * -);` - `scroll-p-()` - `scroll-padding: var();` - `scroll-p-[]` - `scroll-padding: ;` ### Horizontal (Inline) - `scroll-px-` - `scroll-padding-inline: calc(var(--spacing) * );` - `-scroll-px-` - `scroll-padding-inline: calc(var(--spacing) * -);` - `scroll-px-()` - `scroll-padding-inline: var();` - `scroll-px-[]` - `scroll-padding-inline: ;` ### Vertical (Block) - `scroll-py-` - `scroll-padding-block: calc(var(--spacing) * );` - `-scroll-py-` - `scroll-padding-block: calc(var(--spacing) * -);` - `scroll-py-()` - `scroll-padding-block: var();` - `scroll-py-[]` - `scroll-padding-block: ;` ### Inline Start - `scroll-ps-` - `scroll-padding-inline-start: calc(var(--spacing) * );` - `-scroll-ps-` - `scroll-padding-inline-start: calc(var(--spacing) * -);` - `scroll-ps-()` - `scroll-padding-inline-start: var();` - `scroll-ps-[]` - `scroll-padding-inline-start: ;` ### Inline End - `scroll-pe-` - `scroll-padding-inline-end: calc(var(--spacing) * );` - `-scroll-pe-` - `scroll-padding-inline-end: calc(var(--spacing) * -);` - `scroll-pe-()` - `scroll-padding-inline-end: var();` - `scroll-pe-[]` - `scroll-padding-inline-end: ;` ### Block Start - `scroll-pbs-` - `scroll-padding-block-start: calc(var(--spacing) * );` - `-scroll-pbs-` - `scroll-padding-block-start: calc(var(--spacing) * -);` - `scroll-pbs-()` - `scroll-padding-block-start: var();` - `scroll-pbs-[]` - `scroll-padding-block-start: ;` ### Block End - `scroll-pbe-` - `scroll-padding-block-end: calc(var(--spacing) * );` - `-scroll-pbe-` - `scroll-padding-block-end: calc(var(--spacing) * -);` - `scroll-pbe-()` - `scroll-padding-block-end: var();` - `scroll-pbe-[]` - `scroll-padding-block-end: ;` ### Top - `scroll-pt-` - `scroll-padding-top: calc(var(--spacing) * );` - `-scroll-pt-` - `scroll-padding-top: calc(var(--spacing) * -);` - `scroll-pt-()` - `scroll-padding-top: var();` - `scroll-pt-[]` - `scroll-padding-top: ;` ### Right - `scroll-pr-` - `scroll-padding-right: calc(var(--spacing) * );` - `-scroll-pr-` - `scroll-padding-right: calc(var(--spacing) * -);` - `scroll-pr-()` - `scroll-padding-right: var();` - `scroll-pr-[]` - `scroll-padding-right: ;` ### Bottom - `scroll-pb-` - `scroll-padding-bottom: calc(var(--spacing) * );` - `-scroll-pb-` - `scroll-padding-bottom: calc(var(--spacing) * -);` - `scroll-pb-()` - `scroll-padding-bottom: var();` - `scroll-pb-[]` - `scroll-padding-bottom: ;` ### Left - `scroll-pl-` - `scroll-padding-left: calc(var(--spacing) * );` - `-scroll-pl-` - `scroll-padding-left: calc(var(--spacing) * -);` - `scroll-pl-()` - `scroll-padding-left: var();` - `scroll-pl-[]` - `scroll-padding-left: ;` ``` -------------------------------- ### Explicitly Registering Source Paths in CSS Source: https://tailwindcss.com/docs/detecting-classes-in-source-files Use `@source` to include files or directories that Tailwind might otherwise ignore, such as those in `node_modules` or `.gitignore`. ```CSS @import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib"; ``` -------------------------------- ### Border Radius Utilities Source: https://tailwindcss.com/docs/border-radius A collection of utilities for controlling the border radius of an element, supporting various sizes, logical properties, and custom values. ```APIDOC ## Border Radius Utilities ### Description Utilities for controlling the border radius of an element. ### Parameters #### Global Radius - **rounded-xs** - `border-radius: var(--radius-xs); /* 0.125rem (2px) */` - **rounded-sm** - `border-radius: var(--radius-sm); /* 0.25rem (4px) */` - **rounded-md** - `border-radius: var(--radius-md); /* 0.375rem (6px) */` - **rounded-lg** - `border-radius: var(--radius-lg); /* 0.5rem (8px) */` - **rounded-xl** - `border-radius: var(--radius-xl); /* 0.75rem (12px) */` - **rounded-2xl** - `border-radius: var(--radius-2xl); /* 1rem (16px) */` - **rounded-3xl** - `border-radius: var(--radius-3xl); /* 1.5rem (24px) */` - **rounded-4xl** - `border-radius: var(--radius-4xl); /* 2rem (32px) */` - **rounded-none** - `border-radius: 0;` - **rounded-full** - `border-radius: calc(infinity * 1px);` - **rounded-()** - `border-radius: var();` - **rounded-[]** - `border-radius: ;` #### Logical Properties (Start/End) - **rounded-s-xs** - `border-start-start-radius: var(--radius-xs); border-end-start-radius: var(--radius-xs);` - **rounded-s-sm** - `border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm);` - **rounded-s-md** - `border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md);` - **rounded-s-lg** - `border-start-start-radius: var(--radius-lg); border-end-start-radius: var(--radius-lg);` - **rounded-s-xl** - `border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl);` - **rounded-s-2xl** - `border-start-start-radius: var(--radius-2xl); border-end-start-radius: var(--radius-2xl);` - **rounded-s-3xl** - `border-start-start-radius: var(--radius-3xl); border-end-start-radius: var(--radius-3xl);` - **rounded-s-4xl** - `border-start-start-radius: var(--radius-4xl); border-end-start-radius: var(--radius-4xl);` - **rounded-s-none** - `border-start-start-radius: 0; border-end-start-radius: 0;` - **rounded-s-full** - `border-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px);` - **rounded-e-xs** - `border-start-end-radius: var(--radius-xs); border-end-end-radius: var(--radius-xs);` - **rounded-e-sm** - `border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);` - **rounded-e-md** - `border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md);` - **rounded-e-lg** - `border-start-end-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg);` - **rounded-e-xl** - `border-start-end-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl);` - **rounded-e-2xl** - `border-start-end-radius: var(--radius-2xl); border-end-end-radius: var(--radius-2xl);` - **rounded-e-3xl** - `border-start-end-radius: var(--radius-3xl); border-end-end-radius: var(--radius-3xl);` - **rounded-e-4xl** - `border-start-end-radius: var(--radius-4xl); border-end-end-radius: var(--radius-4xl);` - **rounded-e-none** - `border-start-end-radius: 0; border-end-end-radius: 0;` - **rounded-e-full** - `border-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px);` #### Side-Specific (Top) - **rounded-t-xs** - `border-top-left-radius: var(--radius-xs); border-top-right-radius: var(--radius-xs);` - **rounded-t-sm** - `border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm);` - **rounded-t-md** - `border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md);` - **rounded-t-lg** - `border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);` - **rounded-t-xl** - `border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl);` - **rounded-t-2xl** - `border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl);` ``` -------------------------------- ### Border Color Utilities - Mist Palette Source: https://tailwindcss.com/docs/border-color Mist color palette utilities for border styling. Includes 10 shades from mist-50 (lightest) to mist-950 (darkest) using OKLCH color space values. ```APIDOC ## Border Color - Mist Palette ### Description Mist color palette utilities for applying border colors. Each shade is defined using CSS custom properties with OKLCH color space values. ### Available Classes | Class | CSS Output | |-------|------------| | `border-mist-50` | `border-color: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */` | | `border-mist-100` | `border-color: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */` | | `border-mist-200` | `border-color: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */` | | `border-mist-300` | `border-color: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */` | | `border-mist-400` | `border-color: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */` | | `border-mist-500` | `border-color: var(--color-mist-500); /* oklch(56% 0.021 213.5) */` | | `border-mist-600` | `border-color: var(--color-mist-600); /* oklch(45% 0.017 213.2) */` | | `border-mist-700` | `border-color: var(--color-mist-700); /* oklch(37.8% 0.015 216) */` | | `border-mist-800` | `border-color: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */` | | `border-mist-900` | `border-color: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */` | | `border-mist-950` | `border-color: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */` | ### Usage Example ```html

Mist border

``` ``` -------------------------------- ### Reset individual transform properties in HTML Source: https://tailwindcss.com/docs/upgrade-guide Use property-specific reset utilities like scale-none instead of transform-none for individual transform properties. ```html ``` -------------------------------- ### Apply custom text shadow utility to HTML Source: https://tailwindcss.com/docs/text-shadow Use the generated `text-shadow-xl` utility class on HTML elements to apply the custom text shadow defined in the theme. ```HTML

Lorem ipsum dolor sit amet...

``` -------------------------------- ### Apply whitespace-pre in HTML Source: https://tailwindcss.com/docs/white-space Use `whitespace-pre` to preserve newlines and spaces, preventing text wrapping. ```html

Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.

``` -------------------------------- ### Incorrect mobile targeting with sm: prefix Source: https://tailwindcss.com/docs/responsive-design Avoid using sm: prefix to target mobile devices; sm: applies at the 640px breakpoint and above, not on small screens. Use unprefixed utilities for mobile styles. ```html

``` -------------------------------- ### place-content-between Grid Layout Source: https://tailwindcss.com/docs/place-content Distributes grid items with equal space between rows and columns on both axes using place-content-between. ```HTML

``` -------------------------------- ### Apply Outline Styles with Tailwind CSS Source: https://tailwindcss.com/docs/outline-style Use utilities like outline-solid, outline-dashed, outline-dotted, and outline-double to set different outline styles on elements. ```html ``` -------------------------------- ### Combine theme, bare, and arbitrary values Source: https://tailwindcss.com/docs/adding-custom-styles Multiple --value() declarations can be used in a single rule; unresolved declarations are omitted. Allows different handling for each value type. ```CSS @theme { --tab-size-github: 8; } @utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-*); } ``` ```CSS @utility opacity-* { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*); } ``` -------------------------------- ### Apply uniform gap in Tailwind CSS Source: https://tailwindcss.com/docs/gap Use `gap-` utilities to set the same gap between both rows and columns in grid and flexbox layouts. ```html

``` -------------------------------- ### Allow text to wrap with text-wrap Source: https://tailwindcss.com/docs/text-wrap Use this utility to wrap overflowing text onto multiple lines at logical points. ```html

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill...

``` -------------------------------- ### Defining component-like utilities with '@utility' API in CSS Source: https://tailwindcss.com/docs/upgrade-guide The '@utility' API also replaces '@layer components' for defining custom component-like classes, allowing them to be overwritten by other Tailwind utilities. ```css @layer components { .btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace; }} ``` ```css @utility btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace;} ``` -------------------------------- ### Using a custom theme border radius utility in HTML Source: https://tailwindcss.com/docs/border-radius Applies the `rounded-5xl` utility, which was previously defined in the Tailwind CSS theme, to an HTML element. ```html

``` -------------------------------- ### Configure Tailwind CSS Vite plugin in Astro Source: https://tailwindcss.com/docs/installation/framework-guides/astro Add the `@tailwindcss/vite` plugin to the `plugins` array within the `vite` configuration in your `astro.config.mjs` file. ```javascript // @ts-checkimport { defineConfig } from "astro/config";import tailwindcss from "@tailwindcss/vite";// https://astro.build/configexport default defineConfig({ vite: { plugins: [tailwindcss()] } }); ``` -------------------------------- ### Apply custom saturation with CSS variables in HTML with Tailwind CSS Source: https://tailwindcss.com/docs/filter-saturate Use the `saturate-()` syntax to apply saturation based on a CSS variable. This is a shorthand for `saturate-[var()]`. ```html

``` -------------------------------- ### Apply Text Transform Responsively with Tailwind CSS Source: https://tailwindcss.com/docs/text-transform Prefix text transform utilities with breakpoint variants like `md:` to apply them conditionally based on screen size. ```html

Lorem ipsum dolor sit amet...

``` -------------------------------- ### CSS for decoration-indigo-400 Source: https://tailwindcss.com/docs/text-decoration-color Applies the text-decoration-color property with the specified color and shade. ```css text-decoration-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ ``` -------------------------------- ### CSS for border-sky-400 utility Source: https://tailwindcss.com/docs/border-color Applies the `border-sky-400` utility class to set the border color using a CSS variable. ```css border-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */ ``` -------------------------------- ### Using custom CSS properties for positioning Source: https://tailwindcss.com/docs/top-right-bottom-left Use inset-() syntax to reference CSS custom properties; this automatically wraps the value in var() function. ```html

``` -------------------------------- ### Stacking multiple font-variant-numeric utilities in Tailwind CSS Source: https://tailwindcss.com/docs/font-variant-numeric Combine multiple `font-variant-numeric` utilities to enable several numeric variants simultaneously. ```html

Subtotal: $100.00
Tax: $14.50
Total: $114.50

``` -------------------------------- ### Set Gradient Stop Positions Source: https://tailwindcss.com/docs/background-image Precisely control the location of gradient color stops using `from-`, `via-`, and `to-` utilities. ```html

``` -------------------------------- ### Use custom invert values Source: https://tailwindcss.com/docs/filter-invert Apply specific inversion amounts using arbitrary values or CSS variables. ```html

``` ```html

``` -------------------------------- ### Flow Root Display HTML Source: https://tailwindcss.com/docs/display Creates a block-level element with its own block formatting context using the flow-root utility. Useful for containing floats and preventing margin collapse. ```html

Well, let me tell you something, ...

Sure, go ahead, laugh if you want...

``` -------------------------------- ### CSS for decoration-indigo-50 Source: https://tailwindcss.com/docs/text-decoration-color Applies the text-decoration-color property with the specified color and shade. ```css text-decoration-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */ ``` -------------------------------- ### Static positioning with Tailwind CSS Source: https://tailwindcss.com/docs/position Use the static utility to position an element according to the normal flow of the document. Offsets are ignored and the element does not act as a position reference for absolutely positioned children. ```html

Static parent

Absolute child

``` -------------------------------- ### Style all descendants with ** variant Source: https://tailwindcss.com/docs/hover-focus-and-other-states Use the ** variant to apply styles to all descendants (not just direct children), useful when combined with other variants to narrow selection scope. ```HTML

{item.name}

``` -------------------------------- ### Add custom colors with @theme directive Source: https://tailwindcss.com/docs/colors Define custom colors under the --color-* namespace using @theme to make them available as utility classes like bg-midnight and text-tahiti. ```CSS @import "tailwindcss"; @theme { --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca; } ``` -------------------------------- ### Dark mode styling with dark variant Source: https://tailwindcss.com/docs/dark-mode Apply dark mode styles using the dark: prefix on utility classes. By default uses prefers-color-scheme media query. ```HTML

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

``` -------------------------------- ### UTILITY .decoration-lime-{shade} Source: https://tailwindcss.com/docs/text-decoration-color Sets the text-decoration-color to a specific shade of lime, ranging from light (50) to dark (950). ```APIDOC ## CLASS .decoration-lime-{shade} ### Description Applies a lime color to text decorations using the lime color palette. ### Method CSS CLASS ### Endpoint .decoration-lime-{shade} ### Parameters #### Path Parameters - **shade** (string) - Required - The color weight (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). ### Request Example Lime Underline ### Response #### Success Response (CSS) - **text-decoration-color** (property) - The CSS variable and OKLCH color value. #### Response Example { "css": "text-decoration-color: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */" } ``` -------------------------------- ### Balanced text wrapping with text-balance Source: https://tailwindcss.com/docs/text-wrap Distributes text evenly across lines; browsers typically limit this to blocks of ~6 lines or less, making it ideal for headings. ```html

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill...

``` -------------------------------- ### Custom perspective with CSS variable Source: https://tailwindcss.com/docs/perspective Use the perspective-() syntax as shorthand for perspective-[var()] to reference CSS custom properties. ```html

``` -------------------------------- ### Apply field-sizing-content to a textarea Source: https://tailwindcss.com/docs/field-sizing Use the `field-sizing-content` utility to allow a form control to adjust its size based on the content. ```html ``` -------------------------------- ### CSS for border-indigo-700 utility Source: https://tailwindcss.com/docs/border-color Applies the `border-indigo-700` utility class to set the border color using a CSS variable. ```css border-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */ ``` -------------------------------- ### Custom and Arbitrary Easing Source: https://tailwindcss.com/docs/transition-timing-function Methods for applying non-standard easing functions using arbitrary values or CSS variables directly in the class name. ```APIDOC ## .ease-[] / .ease-() ### Description Apply custom easing functions using arbitrary values or CSS variables for specific use cases. ### Method Dynamic CSS Class ### Endpoint .ease-[value], .ease-(variable) ### Parameters #### Path Parameters - **value** (string) - Required - A CSS timing function value (e.g., cubic-bezier(0.95, 0.05, 0.795, 0.035)). - **variable** (string) - Required - A CSS custom property name (e.g., --my-ease). ### Request Example ``` -------------------------------- ### Fixed table column widths with table-fixed Source: https://tailwindcss.com/docs/table-layout Use table-fixed to ignore cell content and apply fixed column widths. Manually set widths in the first row; remaining columns divide available space evenly. ```HTML

Song	Artist	Year
The Sliding Mr. Bones (Next Stop, Pottersville)	Malcolm Lockyer	1961
Witchy Woman	The Eagles	1972
Shining Star	Earth, Wind, and Fire	1975

``` -------------------------------- ### Logical border properties for left-to-right text Source: https://tailwindcss.com/docs/border-color Use border-s-* and border-e-* utilities to set border-inline-start-color and border-inline-end-color, which adapt to text direction. ```html

``` -------------------------------- ### Custom border width with CSS variables Source: https://tailwindcss.com/docs/border-width Use the border-(length:) syntax as shorthand for border-[length:var()] to reference CSS custom properties. ```html

``` -------------------------------- ### Apply Prefix to CSS Imports Source: https://tailwindcss.com/docs/preflight Add the prefix() function to both theme and utilities imports when using a custom class prefix. ```css @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/theme.css" layer(theme) prefix(tw);@import "tailwindcss/utilities.css" layer(utilities) prefix(tw); ``` -------------------------------- ### Responsive mask-clip variants Source: https://tailwindcss.com/docs/mask-clip Apply mask-clip utilities conditionally at different breakpoints using responsive variants like md:. ```html

``` -------------------------------- ### Gray Border Top Color Utilities Source: https://tailwindcss.com/docs/border-color Utilities for applying gray shades to the top border. ```css border-t-gray-50 ``` ```css border-top-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ ``` ```css border-t-gray-100 ``` ```css border-top-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ ``` ```css border-t-gray-200 ``` ```css border-top-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ ``` ```css border-t-gray-300 ``` ```css border-top-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ ``` ```css border-t-gray-400 ``` ```css border-top-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ ``` ```css border-t-gray-500 ``` ```css border-top-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ ``` ```css border-t-gray-600 ``` ```css border-top-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ ``` ```css border-t-gray-700 ``` ```css border-top-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ ``` ```css border-t-gray-800 ``` ```css border-top-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ ``` ```css border-t-gray-900 ``` ```css border-top-color: var(--color-gray-900); /* oklch(21% 0.034 264.665) */ ``` ```css border-t-gray-950 ``` ```css border-top-color: var(--color-gray-950); /* oklch(13% 0.028 261.692) */ ``` -------------------------------- ### Left-side border radius utilities in CSS Source: https://tailwindcss.com/docs/border-radius CSS output for rounded-l-* utilities that apply border-radius to both top-left and bottom-left corners. Supports predefined sizes (3xl, 4xl), none, full, custom properties, and arbitrary values. ```CSS border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ ``` ```CSS border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */ ``` ```CSS border-top-left-radius: 0; border-bottom-left-radius: 0; ``` ```CSS border-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); ``` ```CSS border-top-left-radius: var(); border-bottom-left-radius: var(); ``` ```CSS border-top-left-radius: ; border-bottom-left-radius: ; ``` -------------------------------- ### Custom border-spacing with arbitrary values Source: https://tailwindcss.com/docs/border-spacing Use the border-spacing-[] syntax to apply custom spacing values not in the predefined scale. ```html

``` -------------------------------- ### mask-size with Custom Values Source: https://tailwindcss.com/docs/mask-size Apply custom mask size values using bracket notation for arbitrary values or CSS variable syntax for dynamic sizing. ```APIDOC ## Custom mask-size Values ### Arbitrary Value Syntax Use the `mask-size-[]` syntax to set mask image size with completely custom values: ```html

``` ### CSS Variable Syntax Use the `mask-size-()` syntax to reference CSS custom properties: ```html

``` ### How It Works - Bracket notation: `mask-size-[]` → `mask-size: ;` - CSS variable syntax: `mask-size-()` → `mask-size: var();` - CSS variable syntax automatically wraps the property in `var()` function ### Use Cases - Setting specific pixel dimensions (e.g., `mask-size-[200px_300px]`) - Using dynamic CSS variables for theme-based sizing - Creating responsive mask patterns with custom breakpoints ``` -------------------------------- ### Set custom max-inline-size with arbitrary values Source: https://tailwindcss.com/docs/max-inline-size Use square bracket notation to apply specific CSS values not found in the default theme. ```html

``` -------------------------------- ### Using diagonal fractions with Tailwind CSS Source: https://tailwindcss.com/docs/font-variant-numeric Apply the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions in fonts that support them. ```html

1/2 3/4 5/6

``` -------------------------------- ### Use CSS Variables for Implicit Grid Column Size in Tailwind CSS Source: https://tailwindcss.com/docs/grid-auto-columns Utilize the `auto-cols-()` syntax to set implicit grid column sizes using CSS variables. ```html

``` -------------------------------- ### Create custom data attribute variants Source: https://tailwindcss.com/docs/hover-focus-and-other-states Define shortcuts for frequently used data attributes in your CSS configuration. ```css @import "tailwindcss";@custom-variant data-checked (&[data-ui~="checked"]); ``` -------------------------------- ### CSS for decoration-indigo-200 Source: https://tailwindcss.com/docs/text-decoration-color Applies the text-decoration-color property with the specified color and shade. ```css text-decoration-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */ ``` -------------------------------- ### Basic border color with Tailwind utilities Source: https://tailwindcss.com/docs/border-color Apply border colors to elements using predefined color utilities like border-indigo-500, border-purple-500, and border-sky-500. ```html

``` -------------------------------- ### Migrate theme() function to CSS variables Source: https://tailwindcss.com/docs/upgrade-guide Use CSS variables directly or reference variable names within the theme() function for better compatibility in v4. ```css .my-class { background-color: theme(colors.red.500); background-color: var(--color-red-500);} ``` ```css @media (width >= theme(screens.xl)) {@media (width >= theme(--breakpoint-xl)) { /* ... */} ``` -------------------------------- ### Use Tailwind in Edge templates Source: https://tailwindcss.com/docs/installation/framework-guides/adonisjs Include the compiled CSS in your HTML head and apply utility classes to your content. ```html @vite(['resources/css/app.css', 'resources/js/app.js'])

Hello world!

``` -------------------------------- ### place-content-evenly Grid Layout Source: https://tailwindcss.com/docs/place-content Distributes grid items evenly spaced on both inline and block axes using place-content-evenly. ```HTML

``` -------------------------------- ### Use custom and CSS variable outline offsets Source: https://tailwindcss.com/docs/outline-offset Apply arbitrary values using square brackets or reference CSS variables directly using the parenthesis shorthand. ```html

``` ```html

``` -------------------------------- ### Customize container theme variables Source: https://tailwindcss.com/docs/columns Define custom --container-* variables in @theme to customize fixed-width column utilities like columns-4xs. ```css @theme { --container-4xs: 14rem; } ``` -------------------------------- ### Creating a pill button with Tailwind CSS Source: https://tailwindcss.com/docs/border-radius Uses the `rounded-full` utility class to create a button with fully rounded corners, giving it a pill shape. ```html ``` -------------------------------- ### Set max-width using breakpoints container Source: https://tailwindcss.com/docs/max-width The container utility sets max-width to match the current breakpoint's min-width. It does not center or add padding by default. ```html

``` ```html

``` -------------------------------- ### CSS for border-indigo-600 utility Source: https://tailwindcss.com/docs/border-color Applies the `border-indigo-600` utility class to set the border color using a CSS variable. ```css border-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */ ``` -------------------------------- ### Set Minimum Inline Size with Custom Value Source: https://tailwindcss.com/docs/min-inline-size Use the `min-inline-[]` syntax to define a custom minimum inline size. ```html

``` -------------------------------- ### Using negative position values Source: https://tailwindcss.com/docs/top-right-bottom-left Prefix position utilities with a dash to apply negative values, useful for positioning elements outside their parent container boundaries. ```html

``` -------------------------------- ### Tailwind CSS -inset-bs-px utility Source: https://tailwindcss.com/docs/top-right-bottom-left Sets the CSS `inset-block-start` property to a fixed negative value of 1 pixel. ```css inset-block-start: -1px; ``` -------------------------------- ### Set custom height values using Tailwind CSS Source: https://tailwindcss.com/docs/height Use square bracket notation for arbitrary values or parentheses for CSS variables. ```html

``` ```html

``` -------------------------------- ### Slate Background Color Utilities Source: https://tailwindcss.com/docs/background-color Utility classes for applying slate background colors using CSS variables. ```tailwind bg-slate-50 ``` ```css background-color: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */ ``` ```tailwind bg-slate-100 ``` ```css background-color: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */ ``` ```tailwind bg-slate-200 ``` ```css background-color: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */ ``` ```tailwind bg-slate-300 ``` ```css background-color: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */ ``` ```tailwind bg-slate-400 ``` ```css background-color: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */ ``` ```tailwind bg-slate-500 ``` ```css background-color: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */ ``` ```tailwind bg-slate-600 ``` ```css background-color: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */ ``` ```tailwind bg-slate-700 ``` ```css background-color: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */ ``` ```tailwind bg-slate-800 ``` ```css background-color: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */ ``` ```tailwind bg-slate-900 ``` ```css background-color: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */ ``` ```tailwind bg-slate-950 ``` ```css background-color: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */ ``` -------------------------------- ### object-cover for resizing to cover container Source: https://tailwindcss.com/docs/object-fit Use object-cover to resize element content to cover its container while maintaining aspect ratio. ```HTML

``` -------------------------------- ### Border Block-Start Color Special Values Source: https://tailwindcss.com/docs/border-color Set border-block-start color to inherit, currentColor, or transparent for flexible color inheritance and transparency. ```CSS border-block-start-color: inherit; ``` ```CSS border-block-start-color: currentColor; ``` ```CSS border-block-start-color: transparent; ``` -------------------------------- ### Migrating 'ring' to 'ring-3' in HTML Source: https://tailwindcss.com/docs/upgrade-guide Update existing 'ring' utilities to 'ring-3' to match the new default width in Tailwind CSS v4. ```html ``` -------------------------------- ### Apply Subpixel Antialiasing with Tailwind CSS Source: https://tailwindcss.com/docs/font-smoothing Use the `subpixel-antialiased` utility to render text using subpixel antialiasing. ```html

The quick brown fox ...

``` -------------------------------- ### CSS for border-sky-700 utility Source: https://tailwindcss.com/docs/border-color Applies the `border-sky-700` utility class to set the border color using a CSS variable. ```css border-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */ ``` -------------------------------- ### Apply responsive mask utilities in Tailwind CSS Source: https://tailwindcss.com/docs/mask-image Use breakpoint variants like md: to change mask properties at specific screen sizes. ```html

```