docu_code/Animation.txt

========================
CODE SNIPPETS
========================
TITLE: Customize Tailwind CSS Animation Theme
DESCRIPTION: Illustrates how to extend or override Tailwind CSS animation utilities by defining custom animations within your `@theme` configuration. This allows for project-specific animation definitions.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: CSS
CODE:
```
@theme {  --animate-wiggle: wiggle 1s ease-in-out infinite;  @keyframes wiggle {    0%,    100% {      transform: rotate(-3deg);    }    50% {      transform: rotate(3deg);    }  }}
```

LANGUAGE: HTML
CODE:
```
<div class="animate-wiggle">  <!-- ... --></div>
```

----------------------------------------

TITLE: Tailwind CSS Animation Utilities Reference
DESCRIPTION: Defines various utility classes for applying CSS animations to elements, including predefined animations like spin, ping, pulse, and bounce, as well as custom animation properties. Each entry specifies the utility class, its corresponding CSS styles, and the underlying keyframe definitions.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: APIDOC
CODE:
```
| Class | Styles |
| --- | --- |
| `animate-spin` | `animation: var(--animate-spin); /* spin 1s linear infinite */ @keyframes spin { to { transform: rotate(360deg); } }` |
| `animate-ping` | `animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }` |
| `animate-pulse` | `animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */ @keyframes pulse { 50% { opacity: 0.5; } }` |
| `animate-bounce` | `animation: var(--animate-bounce); /* bounce 1s infinite */ @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }` |
| `animate-none` | `animation: none;` |
| `animate-(<custom-property>)` | `animation: var(<custom-property>);` |
| `animate-[<value>]` | `animation: <value>;`
```

----------------------------------------

TITLE: Apply Responsive Animations with Tailwind CSS
DESCRIPTION: Explains how to use breakpoint variants (e.g., `md:`) to apply animation utilities only at specific screen sizes and above. This enables responsive animation behavior.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<div class="animate-none md:animate-spin ...">  <!-- ... --></div>
```

----------------------------------------

TITLE: TailwindCSS Transitions & Animation Utilities
DESCRIPTION: Documentation for TailwindCSS utilities that manage CSS transitions and animations. These utilities define properties to animate, duration, timing functions, delays, and custom animations.

SOURCE: https://tailwindcss.com/docs/color

LANGUAGE: APIDOC
CODE:
```
transition-property
transition-behavior
transition-duration
transition-timing-function
transition-delay
animation
```

----------------------------------------

TITLE: Using Custom Animation Values in Tailwind CSS
DESCRIPTION: Demonstrates how to define and apply custom animation values using arbitrary value syntax. This allows for highly specific animation properties directly within your HTML classes.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<div class="animate-[wiggle_1s_ease-in-out_infinite] ...">  <!-- ... --></div>
```

LANGUAGE: HTML
CODE:
```
<div class="animate-(--my-animation) ...">  <!-- ... --></div>
```

----------------------------------------

TITLE: TailwindCSS Transition and Animation Utilities
DESCRIPTION: Documentation for TailwindCSS utilities used to define CSS transitions and animations, including properties to animate, duration, timing functions, and delays.

SOURCE: https://tailwindcss.com/docs/box-shadow

LANGUAGE: APIDOC
CODE:
```
transition-property
transition-behavior
transition-duration
transition-timing-function
transition-delay
animation
```

----------------------------------------

TITLE: Apply Spin Animation to Button for Loading Indicators
DESCRIPTION: Demonstrates how to use the `animate-spin` utility class to add a linear spin animation to an SVG icon within a button. This is commonly used to indicate a processing or loading state to the user.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<button type="button" class="bg-indigo-500 ..." disabled>  <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24">    <!-- ... -->  </svg>  Processing…</button>
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utilities
DESCRIPTION: Documents the Tailwind CSS utility classes for defining CSS transitions and animations, including properties like duration, timing function, delay, and general animation control.

SOURCE: https://tailwindcss.com/docs/backface-visibility

LANGUAGE: APIDOC
CODE:
```
Transitions & Animation:
- transition-property
- transition-behavior
- transition-duration
- transition-timing-function
- transition-delay
- animation
```

----------------------------------------

TITLE: Implement Ping Animation for Notification Badges
DESCRIPTION: Illustrates the application of the `animate-ping` utility to create a scaling and fading effect, similar to a radar ping or water ripple. This animation is particularly useful for drawing attention to elements like notification badges.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<span class="relative flex size-3">  <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>  <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span></span>
```

----------------------------------------

TITLE: TailwindCSS Transition and Animation Utilities
DESCRIPTION: Documents TailwindCSS utilities for defining CSS transitions and animations. These utilities control which properties transition, the duration, timing function, and delay of transitions, as well as general animation properties.

SOURCE: https://tailwindcss.com/docs/background-image

LANGUAGE: APIDOC
CODE:
```
Transition & Animation Utilities:
- transition-property: Specifies the CSS properties to which a transition effect should be applied.
- transition-behavior: Defines how transitions behave for discrete properties.
- transition-duration: Sets the duration of a transition effect.
- transition-timing-function: Specifies the speed curve of a transition effect.
- transition-delay: Specifies when the transition effect will start.
- animation: A shorthand property for all the animation properties.
```

----------------------------------------

TITLE: Tailwind CSS Transitions & Animation Utilities
DESCRIPTION: This section covers CSS properties for controlling animated transitions between states and defining complex animations, including timing, duration, and delay.

SOURCE: https://tailwindcss.com/docs/text-color

LANGUAGE: APIDOC
CODE:
```
CSS Transitions & Animation Properties:

transition-property: Specifies the CSS properties to which a transition effect should be applied.
transition-behavior: Specifies whether a transition should be applied to discrete properties.
transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.
transition-timing-function: Specifies the speed curve of the transition effect.
transition-delay: Specifies when the transition effect will start.
animation: A shorthand property for all the animation properties.
```

----------------------------------------

TITLE: Conditionally Apply Animations for Reduced Motion in Tailwind CSS
DESCRIPTION: Shows how to use `motion-safe` and `motion-reduce` variants to conditionally apply animations based on user preferences for reduced motion. This ensures accessibility by respecting system settings.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<button type="button" class="bg-indigo-600 ..." disabled>  <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24">    <!-- ... -->  </svg>  Processing</button>
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utilities
DESCRIPTION: Documents Tailwind CSS utility classes for controlling CSS transitions and animations, including properties, duration, timing functions, delays, and general animation definitions.

SOURCE: https://tailwindcss.com/docs/filter-drop-shadow

LANGUAGE: APIDOC
CODE:
```
transition-property: Specifies the CSS properties to which a transition effect should be applied.
transition-behavior: Defines whether a transition is applied to discrete properties.
transition-duration: Sets the duration of a transition effect.
transition-timing-function: Specifies the speed curve of a transition effect.
transition-delay: Specifies when the transition effect will start.
animation: A shorthand property for all animation properties.
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utilities
DESCRIPTION: Documentation for Tailwind CSS utilities used to define CSS transitions and animations, including property, duration, timing function, delay, and animation properties.

SOURCE: https://tailwindcss.com/docs/padding

LANGUAGE: APIDOC
CODE:
```
Transitions & Animation:
  - transition-property: Specifies the CSS properties to which a transition effect should be applied.
  - transition-behavior: Specifies whether a transition should be applied to discrete properties.
  - transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.
  - transition-timing-function: Specifies the speed curve of the transition effect.
  - transition-delay: Specifies when the transition effect will start.
  - animation: A shorthand property for all the animation properties.
```

----------------------------------------

TITLE: Define Animation Keyframes within Tailwind CSS Theme
DESCRIPTION: This CSS snippet shows how to define `@keyframes` rules for `--animate-*` theme variables directly within the `@theme` block. This ensures that the animation keyframes are included in your generated CSS when the corresponding animation utility is used.

SOURCE: https://tailwindcss.com/docs/theme

LANGUAGE: css
CODE:
```
@import "tailwindcss";@theme {  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;  @keyframes fade-in-scale {    0% {      opacity: 0;      transform: scale(0.95);    }    100% {      opacity: 1;      transform: scale(1);    }  }}
```

----------------------------------------

TITLE: Add Pulse Animation with Tailwind CSS
DESCRIPTION: Demonstrates how to create a skeleton loader effect using the `animate-pulse` utility class in Tailwind CSS. This utility makes an element gently fade in and out, ideal for indicating loading states.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4">  <div class="flex animate-pulse space-x-4">    <div class="size-10 rounded-full bg-gray-200"></div>    <div class="flex-1 space-y-6 py-1">      <div class="h-2 rounded bg-gray-200"></div>      <div class="space-y-3">        <div class="grid grid-cols-3 gap-4">          <div class="col-span-2 h-2 rounded bg-gray-200"></div>          <div class="col-span-1 h-2 rounded bg-gray-200"></div>        </div>        <div class="h-2 rounded bg-gray-200"></div>      </div>    </div>  </div></div>
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utilities
DESCRIPTION: API documentation for Tailwind CSS utilities that define how elements transition between states and apply custom animations.

SOURCE: https://tailwindcss.com/docs/text-decoration-color

LANGUAGE: APIDOC
CODE:
```
Transitions & Animation Properties:
- transition-property
- transition-behavior
- transition-duration
- transition-timing-function
- transition-delay
- animation
```

----------------------------------------

TITLE: Tailwind CSS Transitions and Animation Utilities
DESCRIPTION: API documentation for Tailwind CSS utility classes that manage CSS transitions and animations. These utilities control properties, duration, timing functions, delays, and general animation behavior.

SOURCE: https://tailwindcss.com/docs/flex-basis

LANGUAGE: APIDOC
CODE:
```
transition-property: Specifies the CSS properties to which a transition effect should be applied.
transition-behavior: Defines whether a transition is applied to discrete properties.
transition-duration: Sets the duration of a transition effect.
transition-timing-function: Specifies the speed curve of a transition effect.
transition-delay: Specifies when the transition effect will start.
animation: A shorthand property for all the animation properties.
```

----------------------------------------

TITLE: Tailwind CSS Transitions & Animation Utilities
DESCRIPTION: Documents utility classes for defining CSS transitions and animations, controlling properties like duration, timing, and delay.

SOURCE: https://tailwindcss.com/docs/border-width

LANGUAGE: APIDOC
CODE:
```
Transitions & Animation:
  transition-property: Utility for specifying the CSS properties to which a transition effect should be applied.
  transition-behavior: Utility for controlling how transitions behave.
  transition-duration: Utility for setting the duration of a transition effect.
  transition-timing-function: Utility for setting the speed curve of a transition effect.
  transition-delay: Utility for setting the delay before a transition effect starts.
  animation: Utility for applying a CSS animation.
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utilities
DESCRIPTION: Lists Tailwind CSS utility classes for defining CSS transitions and animations. These utilities control properties like transition duration, timing functions, delays, and general animation behavior.

SOURCE: https://tailwindcss.com/docs/text-decoration-style

LANGUAGE: APIDOC
CODE:
```
transition-property: transition-property
transition-behavior: transition-behavior
transition-duration: transition-duration
transition-timing-function: transition-timing-function
transition-delay: transition-delay
animation: animation
```

----------------------------------------

TITLE: Add Bounce Animation with Tailwind CSS
DESCRIPTION: Illustrates the use of the `animate-bounce` utility class to make an element bounce up and down. This is commonly used for visual cues like 'scroll down' indicators.

SOURCE: https://tailwindcss.com/docs/animation

LANGUAGE: HTML
CODE:
```
<svg class="size-6 animate-bounce ...">  <!-- ... --></svg>
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utility Classes
DESCRIPTION: Documents Tailwind CSS utility classes for defining CSS transitions and animations. These utilities control properties like transition duration, timing functions, delays, and custom animation definitions.

SOURCE: https://tailwindcss.com/docs/user-select

LANGUAGE: APIDOC
CODE:
```
Transitions & Animation Utilities:
  transition-property: Specifies the CSS properties to which a transition effect should be applied.
  transition-behavior: Defines how transitions behave.
  transition-duration: Sets the duration of a transition effect.
  transition-timing-function: Specifies the speed curve of a transition effect.
  transition-delay: Specifies when a transition effect will start.
  animation: Applies an animation to an element.
```

----------------------------------------

TITLE: CSS Transitions and Animation Properties
DESCRIPTION: Documentation for CSS properties that enable smooth transitions between property values and define complex animations.

SOURCE: https://tailwindcss.com/docs/margin

LANGUAGE: APIDOC
CODE:
```
transition-property: Specifies the name of the CSS properties to which a transition effect should be applied.
transition-behavior: Specifies whether a transition should be applied to discrete properties.
transition-duration: Specifies the length of time a transition takes to complete.
transition-timing-function: Specifies the speed curve of the transition effect.
transition-delay: Specifies when the transition effect will start.
animation: A shorthand property for all the animation properties.
```

----------------------------------------

TITLE: Hide Animations for Reduced Motion with Tailwind CSS `motion-reduce`
DESCRIPTION: Shows how to use the `motion-reduce` variant to conditionally hide animations (like a spinner) when the user has requested reduced motion. The example applies `motion-reduce:hidden` to an SVG element within a button, ensuring a smoother experience for users with motion sensitivities.

SOURCE: https://tailwindcss.com/docs/hover-focus-and-other-states

LANGUAGE: HTML
CODE:
```
<button type="button" class="bg-indigo-500 ..." disabled>  <svg class="animate-spin motion-reduce:hidden ..." viewBox="0 0 24 24"><!-- ... --></svg>  Processing...</button>
```

----------------------------------------

TITLE: Tailwind CSS Transitions & Animation Utilities Reference
DESCRIPTION: Documents the utility classes available in Tailwind CSS for defining transition properties, duration, timing functions, delay, and general animation.

SOURCE: https://tailwindcss.com/docs/outline-width

LANGUAGE: APIDOC
CODE:
```
### Transitions & Animation
* transition-property
* transition-behavior
* transition-duration
* transition-timing-function
* transition-delay
* animation
```

----------------------------------------

TITLE: TailwindCSS Transition and Animation Utilities
DESCRIPTION: This section details TailwindCSS utilities for defining CSS transitions and animations, including properties for specifying the transition property, behavior, duration, timing functions, delays, and general animation control. These are essential for creating dynamic and interactive user interfaces.

SOURCE: https://tailwindcss.com/docs/border-color

LANGUAGE: APIDOC
CODE:
```
transition-property
transition-behavior
transition-duration
transition-timing-function
transition-delay
animation
```

----------------------------------------

TITLE: CSS Transitions and Animation Properties Reference
DESCRIPTION: Documentation for CSS properties used to define smooth transitions and complex animations, including duration, timing functions, and delays, often used with Tailwind CSS utilities.

SOURCE: https://tailwindcss.com/docs/background-color

LANGUAGE: APIDOC
CODE:
```
transition-property
transition-behavior
transition-duration
transition-timing-function
transition-delay
animation
```

----------------------------------------

TITLE: Tailwind CSS Transition and Animation Utilities
DESCRIPTION: This section covers Tailwind CSS utility classes for defining transitions and animations, including properties for duration, timing functions, and delays. These classes enable smooth visual changes and dynamic effects.

SOURCE: https://tailwindcss.com/docs/float

LANGUAGE: APIDOC
CODE:
```
Tailwind CSS Transition & Animation Utilities:
- transition-property: Utilities for controlling which CSS properties transition.
- transition-behavior: Utilities for controlling the transition behavior.
- transition-duration: Utilities for controlling the duration of CSS transitions.
- transition-timing-function: Utilities for controlling the timing function of CSS transitions.
- transition-delay: Utilities for controlling the delay of CSS transitions.
- animation: Utilities for controlling CSS animations.
```

----------------------------------------

TITLE: Tailwind CSS Transitions and Animation Utilities
DESCRIPTION: This section covers Tailwind CSS utility classes for managing CSS transitions and animations. It includes properties for defining which CSS properties to transition, transition behavior, duration, timing functions, delay, and general animation properties.

SOURCE: https://tailwindcss.com/docs/line-height

LANGUAGE: APIDOC
CODE:
```
Transitions & Animation:
- transition-property: Utilities for controlling which CSS properties transition.
- transition-behavior: Utilities for controlling the transition behavior.
- transition-duration: Utilities for controlling the duration of CSS transitions.
- transition-timing-function: Utilities for controlling the timing function of CSS transitions.
- transition-delay: Utilities for controlling the delay of CSS transitions.
- animation: Utilities for controlling CSS animations.
```

----------------------------------------

TITLE: TailwindCSS Transition and Animation Utilities
DESCRIPTION: This section provides TailwindCSS utilities for defining CSS transitions and animations, including properties for duration, timing functions, and delays, enabling smooth visual changes.

SOURCE: https://tailwindcss.com/docs/border-radius

LANGUAGE: APIDOC
CODE:
```
transition-property
transition-behavior
transition-duration
transition-timing-function
transition-delay
animation
```

----------------------------------------

TITLE: CSS Transitions & Animation Properties
DESCRIPTION: Documentation for CSS properties used to define smooth transitions and complex animations for elements, controlling property changes over time, duration, timing functions, and delays.

SOURCE: https://tailwindcss.com/docs/max-width

LANGUAGE: APIDOC
CODE:
```
transition-property: Specifies the CSS properties to which a transition effect should be applied.
transition-behavior: Specifies whether a transition should be interruptible.
transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.
transition-timing-function: Specifies the speed curve of the transition effect.
transition-delay: Specifies when the transition effect will start.
animation: A shorthand property for all the animation properties.
```

----------------------------------------

TITLE: Animate React Component with Tailwind CSS Variable
DESCRIPTION: Demonstrates animating a React component's background color using a CSS variable, specifically a Tailwind CSS color variable, with the Motion library. This approach allows dynamic styling based on theme values.

SOURCE: https://tailwindcss.com/docs/theme

LANGUAGE: JSX
CODE:
```
<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />
```

----------------------------------------

TITLE: Tailwind CSS Transitions and Animation Utilities
DESCRIPTION: This section lists Tailwind CSS utility classes for defining CSS transitions and animations. These include properties for controlling which CSS properties to transition, duration, timing functions, delay, and custom animations.

SOURCE: https://tailwindcss.com/docs/installation/tailwind-cli

LANGUAGE: APIDOC
CODE:
```
transition-property: Utilities for controlling which CSS properties transition.
transition-behavior: Utilities for controlling the transition behavior.
transition-duration: Utilities for controlling the duration of CSS transitions.
transition-timing-function: Utilities for controlling the timing function of CSS transitions.
transition-delay: Utilities for controlling the delay of CSS transitions.
animation: Utilities for controlling custom CSS animations.
```

----------------------------------------

TITLE: Tailwind CSS Transitions and Animation Properties
DESCRIPTION: Documentation for Tailwind CSS utilities that control CSS transitions and animations, enabling smooth changes in element properties over time.

SOURCE: https://tailwindcss.com/docs/width

LANGUAGE: APIDOC
CODE:
```
transition-property: Specifies the CSS properties to which a transition effect should be applied.
transition-behavior: Defines whether a transition is applied to discrete properties.
transition-duration: Specifies how long a transition animation should take to complete.
transition-timing-function: Specifies the speed curve of the transition effect.
transition-delay: Specifies when the transition effect will start.
animation: A shorthand property for all animation properties.
```

----------------------------------------

TITLE: Tailwind CSS Transitions & Animation Utility Classes
DESCRIPTION: Reference for Tailwind CSS utility classes for controlling CSS transitions and animations, including property, duration, timing, and delay.

SOURCE: https://tailwindcss.com/docs/background-size

LANGUAGE: APIDOC
CODE:
```
transition-property: Utilities for controlling which CSS properties transition.
transition-behavior: Utilities for controlling transition behavior.
transition-duration: Utilities for controlling the duration of CSS transitions.
transition-timing-function: Utilities for controlling the timing function of CSS transitions.
transition-delay: Utilities for controlling the delay of CSS transitions.
animation: Utilities for controlling CSS animations.
```

----------------------------------------

TITLE: Tailwind CSS Transitions and Animation Utilities
DESCRIPTION: Documents Tailwind CSS utility classes for defining and controlling CSS transitions and animations, including properties, duration, timing functions, and delays.

SOURCE: https://tailwindcss.com/docs/table-layout

LANGUAGE: APIDOC
CODE:
```
transition-property: Utilities for controlling which CSS properties transition.
transition-behavior: Utilities for controlling the transition behavior.
transition-duration: Utilities for controlling the duration of CSS transitions.
transition-timing-function: Utilities for controlling the timing function of CSS transitions.
transition-delay: Utilities for controlling the delay of CSS transitions.
animation: Utilities for controlling CSS animations.
```

----------------------------------------

TITLE: Tailwind CSS Transitions and Animation Utilities
DESCRIPTION: Documentation for Tailwind CSS utilities that manage CSS transitions and animations, allowing for smooth changes in element properties over time.

SOURCE: https://tailwindcss.com/docs/white-space

LANGUAGE: APIDOC
CODE:
```
transition-property: Utilities for controlling which CSS properties transition.
transition-behavior: Utilities for controlling the transition behavior.
transition-duration: Utilities for controlling the duration of CSS transitions.
transition-timing-function: Utilities for controlling the timing function of CSS transitions.
transition-delay: Utilities for controlling the delay of CSS transitions.
animation: Utilities for controlling CSS animations.
```

----------------------------------------

TITLE: Tailwind CSS Layout, Animation, and Transform Utilities Reference
DESCRIPTION: This section covers Tailwind CSS utilities for table styling, transitions, animations, and 2D/3D transforms. It includes properties for collapsing borders, spacing, table layout, caption positioning, transition timing, animation definitions, backface visibility, perspective, rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/vue

LANGUAGE: APIDOC
CODE:
```
Tables:
  border-collapse: Utilities for controlling whether table borders are collapsed into a single border or separated.
  border-spacing: Utilities for controlling the distance between the borders of adjacent cells in a table.
  table-layout: Utilities for controlling the algorithm used to lay out table cells, rows, and columns.
  caption-side: Utilities for controlling the placement of a table caption.

Transitions & Animation:
  transition-property: Utilities for controlling which CSS properties transition.
  transition-behavior: Utilities for controlling the transition behavior.
  transition-duration: Utilities for controlling the duration of CSS transitions.
  transition-timing-function: Utilities for controlling the timing function of CSS transitions.
  transition-delay: Utilities for controlling the delay of CSS transitions.
  animation: Utilities for controlling CSS animations.

Transforms:
  backface-visibility: Utilities for controlling whether the back face of an element is visible when rotated.
  perspective: Utilities for controlling the distance between the user and the z=0 plane.
  perspective-origin: Utilities for controlling the origin of the perspective property.
  rotate: Utilities for rotating elements.
  scale: Utilities for scaling elements.
  skew: Utilities for skewing elements.
  transform: General utilities for applying 2D or 3D transforms to an element.
  transform-origin: Utilities for controlling the origin of an element's transform.
  transform-style: Utilities for controlling how nested elements are rendered in 3D space.
  translate: Utilities for translating elements.
```

----------------------------------------

TITLE: Apply Basic Transition Timing Functions in HTML
DESCRIPTION: Demonstrates how to apply standard Tailwind CSS transition timing utility classes like `ease-in`, `ease-out`, and `ease-in-out` to HTML elements for controlling animation easing. These classes are typically combined with duration utilities.

SOURCE: https://tailwindcss.com/docs/transition-timing-function

LANGUAGE: HTML
CODE:
```
<button class="duration-300 ease-in ...">Button A</button><button class="duration-300 ease-out ...">Button B</button><button class="duration-300 ease-in-out ...">Button C</button>
```

----------------------------------------

TITLE: Define Default Tailwind CSS Theme Variables and Keyframes
DESCRIPTION: This CSS snippet defines a collection of custom properties (CSS variables) for various theme aspects such as perspective, aspect ratios, easing functions, and animation properties. It also includes the corresponding `@keyframes` rules for `spin`, `ping`, `pulse`, and `bounce` animations, which are referenced by the animation variables.

SOURCE: https://tailwindcss.com/docs/theme

LANGUAGE: css
CODE:
```
00px;  --perspective-midrange: 800px;  --perspective-distant: 1200px;  --aspect-video: 16 / 9;  --ease-in: cubic-bezier(0.4, 0, 1, 1);  --ease-out: cubic-bezier(0, 0, 0.2, 1);  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  --animate-spin: spin 1s linear infinite;  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;  --animate-bounce: bounce 1s infinite;  @keyframes spin {    to {      transform: rotate(360deg);    }  }  @keyframes ping {    75%,    100% {      transform: scale(2);      opacity: 0;    }  }  @keyframes pulse {    50% {      opacity: 0.5;    }  }  @keyframes bounce {    0%,    100% {      transform: translateY(-25%);      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);    }    50% {      transform: none;      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);    }  }
```

----------------------------------------

TITLE: Tailwind CSS Utility Class Reference
DESCRIPTION: This entry documents various Tailwind CSS utility classes across different categories, providing a comprehensive overview of available styling options. It includes classes for visual effects, filters, table layouts, animations, transformations, user interaction, SVG styling, and accessibility.

SOURCE: https://tailwindcss.com/docs/filter-hue-rotate

LANGUAGE: APIDOC
CODE:
```
Tailwind CSS Utility Classes:

Effects:
  - box-shadow: Applies box shadow.
  - text-shadow: Applies text shadow.
  - opacity: Sets the opacity level.
  - mix-blend-mode: Sets how an element's content should blend with its background.
  - background-blend-mode: Sets how an element's background images should blend with each other and with the element's background color.
  - mask-clip: Defines the mask clipping area.
  - mask-composite: Defines the compositing operation used to combine the current mask with the mask below it.
  - mask-image: Sets the image that is used as a mask layer for an element.
  - mask-mode: Sets whether the mask image is interpreted as a luminance mask or an alpha mask.
  - mask-origin: Specifies the origin of the mask image.
  - mask-position: Sets the initial position of a mask image.
  - mask-repeat: Sets how mask images are repeated.
  - mask-size: Specifies the size of the mask image.
  - mask-type: Specifies whether a mask is interpreted as a luminance mask or an alpha mask.

Filters:
  - filter: Applies graphical effects like blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia.
    - blur: Applies a Gaussian blur to the input image.
    - brightness: Adjusts the brightness of the input image.
    - contrast: Adjusts the contrast of the input image.
    - drop-shadow: Applies a drop shadow to the input image.
    - grayscale: Converts the input image to grayscale.
    - hue-rotate: Applies a hue rotation to the input image.
    - invert: Inverts the colors of the input image.
    - saturate: Saturates the input image.
    - sepia: Converts the input image to sepia.
  - backdrop-filter: Applies graphical effects to the area behind an element.
    - blur: Applies a Gaussian blur to the backdrop.
    - brightness: Adjusts the brightness of the backdrop.
    - contrast: Adjusts the contrast of the backdrop.
    - grayscale: Converts the backdrop to grayscale.
    - hue-rotate: Applies a hue rotation to the backdrop.
    - invert: Inverts the colors of the backdrop.
    - opacity: Sets the opacity of the backdrop.
    - saturate: Saturates the backdrop.
    - sepia: Converts the backdrop to sepia.

Tables:
  - border-collapse: Sets whether table borders are collapsed into a single border or separated.
  - border-spacing: Sets the distance between the borders of adjacent cells.
  - table-layout: Sets the algorithm used to lay out table cells, rows, and columns.
  - caption-side: Specifies the placement of a table caption.

Transitions & Animation:
  - transition-property: Specifies the CSS properties to which a transition effect should be applied.
  - transition-behavior: Defines whether a transition is applied to discrete properties.
  - transition-duration: Specifies the duration of a transition effect.
  - transition-timing-function: Specifies the speed curve of a transition effect.
  - transition-delay: Specifies when a transition effect will start.
  - animation: Applies an animation to an element.

Transforms:
  - backface-visibility: Defines whether the back face of an element is visible when turned towards the user.
  - perspective: Defines how far the object is from the user.
  - perspective-origin: Defines the origin of the perspective property.
  - rotate: Rotates an element.
  - scale: Scales an element.
  - skew: Skews an element.
  - transform: Applies a 2D or 3D transformation to an element.
  - transform-origin: Sets the origin for transformations.
  - transform-style: Specifies how nested elements are rendered in 3D space.
  - translate: Translates an element.

Interactivity:
  - accent-color: Sets the accent color for user-interface controls.
  - appearance: Controls the native appearance of UI widgets.
  - caret-color: Sets the color of the text insertion caret.
  - color-scheme: Sets the color scheme for an element.
  - cursor: Specifies the mouse cursor to be displayed when pointing over an element.
  - field-sizing: Controls the sizing of form fields.
  - pointer-events: Sets whether an element is the target of pointer events.
  - resize: Specifies whether an element is resizable by the user.
  - scroll-behavior: Specifies the scrolling behavior for a scrolling box.
  - scroll-margin: Sets the margin of the scroll snap area.
  - scroll-padding: Sets the padding of the scroll snap area.
  - scroll-snap-align: Specifies the snap position of an element within its scroll container.
  - scroll-snap-stop: Specifies whether the scroll container must snap to a snap position.
  - scroll-snap-type: Specifies how strictly snap points are enforced on the scroll container.
  - touch-action: Specifies how a touch screen user can interact with the element.
  - user-select: Controls whether the user can select text.
  - will-change: Hints to browsers how an element will be transformed.

SVG:
  - fill: Sets the color of the interior of an SVG shape.
  - stroke: Sets the color of the outline of an SVG shape.
  - stroke-width: Sets the width of the outline of an SVG shape.

Accessibility:
  - forced-color-adjust: Controls how user agents adjust colors in forced color modes.
```

----------------------------------------

TITLE: Tailwind CSS Table, Transition, Transform, Interactivity, SVG, and Accessibility Utilities
DESCRIPTION: This comprehensive section documents various Tailwind CSS utility classes for styling tables, controlling transitions and animations, applying 2D/3D transforms, managing user interactivity, styling SVG elements, and enhancing accessibility. Each utility maps directly to a specific CSS property, providing granular control over element presentation and behavior.

SOURCE: https://tailwindcss.com/docs/place-self

LANGUAGE: APIDOC
CODE:
```
Tables:
  - border-collapse: Sets whether table borders are collapsed into a single border or separated.
  - border-spacing: Sets the distance between the borders of adjacent cells.
  - table-layout: Sets the algorithm used to lay out table cells, rows, and columns.
  - caption-side: Specifies the placement of a table caption.

Transitions & Animation:
  - transition-property: Specifies the CSS properties to which a transition effect should be applied.
  - transition-behavior: Defines whether a transition is applied to a property's discrete or animatable values.
  - transition-duration: Sets the duration of a transition effect.
  - transition-timing-function: Specifies the speed curve of a transition effect.
  - transition-delay: Specifies when the transition effect will start.
  - animation: A shorthand property for all animation properties.

Transforms:
  - backface-visibility: Defines whether the back face of an element is visible when facing the user.
  - perspective: Defines how far the object is from the user.
  - perspective-origin: Sets the origin for the perspective property.
  - rotate: Applies a 2D or 3D rotation transform.
  - scale: Applies a 2D or 3D scaling transform.
  - skew: Applies a 2D skew transform.
  - transform: Applies a 2D or 3D transform to an element.
  - transform-origin: Sets the origin for transformations.
  - transform-style: Specifies how nested elements are rendered in 3D space.
  - translate: Applies a 2D or 3D translation transform.

Interactivity:
  - accent-color: Sets the accent color for user-interface controls.
  - appearance: Controls the native appearance of UI widgets.
  - caret-color: Sets the color of the text insertion caret.
  - color-scheme: Sets the color scheme for an element.
  - cursor: Specifies the type of cursor to be displayed.
  - field-sizing: Controls the sizing of form fields.
  - pointer-events: Defines whether an element reacts to pointer events.
  - resize: Specifies whether an element is resizable by the user.
  - scroll-behavior: Specifies the scrolling behavior for a scrolling box.
  - scroll-margin: Sets the margin of the scroll snap area.
  - scroll-padding: Sets the padding of the scroll snap area.
  - scroll-snap-align: Specifies the snap position for a scroll container.
  - scroll-snap-stop: Specifies whether the scroll container must snap to a snap point.
  - scroll-snap-type: Specifies how strictly snap points are enforced.
  - touch-action: Defines how a touch-action property behaves.
  - user-select: Controls whether the user can select text.
  - will-change: Hints to browsers about what changes are expected to an element.

SVG:
  - fill: Sets the color of the interior of an SVG shape.
  - stroke: Sets the color of the outline of an SVG shape.
  - stroke-width: Sets the width of the outline of an SVG shape.

Accessibility:
  - forced-color-adjust: Controls how user agents adjust colors in forced color modes.
```

----------------------------------------

TITLE: Tailwind CSS Layout and Interactivity Utilities
DESCRIPTION: This section outlines Tailwind CSS utility classes for table styling, transitions, animations, transforms, interactivity, SVG, and accessibility. It covers properties like border collapse, table layout, transition properties, animation, 2D/3D transforms, cursor styles, scroll behavior, and user selection.

SOURCE: https://tailwindcss.com/docs/flex-direction

LANGUAGE: APIDOC
CODE:
```
Tables:
  - border-collapse: Sets whether table borders are collapsed into a single border or separated.
  - border-spacing: Sets the distance between the borders of adjacent cells.
  - table-layout: Sets the algorithm used to lay out table cells, rows, and columns.
  - caption-side: Specifies the placement of a table caption.

Transitions & Animation:
  - transition-property: Specifies the CSS properties to which a transition effect should be applied.
  - transition-behavior: Specifies whether a transition is applied to a property's discrete or animatable values.
  - transition-duration: Sets the duration of a transition effect.
  - transition-timing-function: Specifies the speed curve of a transition effect.
  - transition-delay: Sets when a transition effect will start.
  - animation: A shorthand property for all animation properties.

Transforms:
  - backface-visibility: Determines whether the back face of an element is visible when turned towards the user.
  - perspective: Specifies the distance between the user and the z=0 plane.
  - perspective-origin: Sets the origin for the perspective property.
  - rotate: Rotates an element.
  - scale: Scales an element.
  - skew: Skews an element.
  - transform: Applies a 2D or 3D transformation to an element.
  - transform-origin: Sets the origin for transformations.
  - transform-style: Specifies how nested elements are rendered in 3D space.
  - translate: Translates an element.

Interactivity:
  - accent-color: Sets the accent color for user-interface controls generated by the element.
  - appearance: Controls the native appearance of UI widgets.
  - caret-color: Sets the color of the text insertion caret.
  - color-scheme: Sets the color scheme for an element.
  - cursor: Specifies the type of cursor to be displayed.
  - field-sizing: Controls the sizing of form fields.
  - pointer-events: Sets under what circumstances (if any) a graphic element can be the target of pointer events.
  - resize: Specifies whether an element is resizable by the user.
  - scroll-behavior: Specifies the scrolling behavior for a scrolling box.
  - scroll-margin: Sets the margin of the scroll snap area.
  - scroll-padding: Sets the padding of the scroll snap area.
  - scroll-snap-align: Specifies the snap position for a scroll container.
  - scroll-snap-stop: Specifies whether the scroll container must snap to a snap point.
  - scroll-snap-type: Specifies how strictly snap points are enforced on the scroll container.
  - touch-action: Specifies how a touch screen user can interact with the element.
  - user-select: Controls whether the user can select text.
  - will-change: Hints to browsers about what changes will be made to an element.

SVG:
  - fill: Sets the color of the interior of an SVG shape.
  - stroke: Sets the color of the outline of an SVG shape.
  - stroke-width: Sets the width of the outline of an SVG shape.

Accessibility:
  - forced-color-adjust: Controls whether the user agent may adjust the colors of the element.
```

----------------------------------------

TITLE: Tailwind CSS Utility Class Reference
DESCRIPTION: A comprehensive reference of Tailwind CSS utility classes categorized by their functional groups, including Effects, Filters, Tables, Transitions & Animation, Transforms, Interactivity, SVG, and Accessibility. Each class maps to a specific CSS property and value.

SOURCE: https://tailwindcss.com/docs/box-decoration-break

LANGUAGE: APIDOC
CODE:
```
Effects:
  box-shadow: Applies box-shadow CSS property.
  text-shadow: Applies text-shadow CSS property.
  opacity: Controls element opacity.
  mix-blend-mode: Sets how an element's content should blend with its background.
  background-blend-mode: Sets how an element's background images should blend with each other and with the element's background color.
  mask-clip: Specifies the mask painting area.
  mask-composite: Defines how multiple mask images are composited.
  mask-image: Sets the image to be used as a mask layer.
  mask-mode: Specifies whether the mask image is interpreted as a luminance mask or an alpha mask.
  mask-origin: Specifies the mask positioning area.
  mask-position: Sets the initial position of a mask image.
  mask-repeat: Sets how mask images are repeated.
  mask-size: Specifies the size of the mask images.
  mask-type: Specifies whether the mask image is interpreted as a luminance mask or an alpha mask.

Filters:
  filter: Applies graphical effects like blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia.
    blur: Applies a Gaussian blur to the input image.
    brightness: Adjusts the brightness of the input image.
    contrast: Adjusts the contrast of the input image.
    drop-shadow: Applies a drop shadow effect.
    grayscale: Converts the input image to grayscale.
    hue-rotate: Applies a hue rotation to the input image.
    invert: Inverts the colors of the input image.
    saturate: Saturates the input image.
    sepia: Converts the input image to sepia.
  backdrop-filter: Applies graphical effects to the area behind an element.
    blur: Applies a Gaussian blur to the backdrop.
    brightness: Adjusts the brightness of the backdrop.
    contrast: Adjusts the contrast of the backdrop.
    grayscale: Converts the backdrop to grayscale.
    hue-rotate: Applies a hue rotation to the backdrop.
    invert: Inverts the colors of the backdrop.
    opacity: Adjusts the opacity of the backdrop.
    saturate: Saturates the backdrop.
    sepia: Converts the backdrop to sepia.

Tables:
  border-collapse: Sets whether table borders are collapsed into a single border or separated.
  border-spacing: Specifies the distance between the borders of adjacent cells.
  table-layout: Sets the algorithm used to lay out table cells, rows, and columns.
  caption-side: Specifies the placement of a table caption.

Transitions & Animation:
  transition-property: Specifies the CSS properties to which a transition effect should be applied.
  transition-behavior: Defines whether a transition is interruptible.
  transition-duration: Sets the duration of a transition effect.
  transition-timing-function: Specifies the speed curve of a transition effect.
  transition-delay: Sets the delay before a transition effect starts.
  animation: Applies an animation to an element.

Transforms:
  backface-visibility: Determines whether the back face of an element is visible when turned towards the user.
  perspective: Gives a 3D-positioned element some perspective.
  perspective-origin: Sets the origin of the perspective property.
  rotate: Rotates an element.
  scale: Scales an element.
  skew: Skews an element.
  transform: Applies a 2D or 3D transformation to an element.
  transform-origin: Sets the origin for transformations of an element.
  transform-style: Specifies how nested elements are rendered in 3D space.
  translate: Translates an element.

Interactivity:
  accent-color: Sets the accent color for user-interface controls generated by the element.
  appearance: Controls the native appearance of UI widgets.
  caret-color: Sets the color of the text insertion caret.
  color-scheme: Specifies the color scheme an element is comfortable with.
  cursor: Sets the type of mouse cursor to show when the mouse pointer is over an element.
  field-sizing: Controls the sizing of form fields.
  pointer-events: Sets whether an element is the target of pointer events.
  resize: Sets whether an element is resizable by the user.
  scroll-behavior: Specifies the scrolling behavior for a scrolling box.
  scroll-margin: Sets the margin of the scroll snap area.
  scroll-padding: Sets the padding of the scroll snap area.
  scroll-snap-align: Specifies the snap position for a scroll container.
  scroll-snap-stop: Specifies whether the scroll container must snap to a snap point.
  scroll-snap-type: Specifies how strictly snap points are enforced on the scroll container.
  touch-action: Specifies how a touch event should be handled.
  user-select: Controls whether the user can select text.
  will-change: Hints to browsers about what changes will be made to an element.

SVG:
  fill: Sets the color of the fill paint operation.
  stroke: Sets the color of the stroke paint operation.
  stroke-width: Sets the width of the stroke paint operation.

Accessibility:
  forced-color-adjust: Controls how colors are adjusted in forced color modes.
```

----------------------------------------

TITLE: Apply Animations Safely with Tailwind CSS `motion-safe` Variant
DESCRIPTION: Illustrates the use of `motion-safe` variant to apply transitions and hover effects only when the user has *not* requested reduced motion. This is useful for avoiding redundant 'undoing' of styles when `motion-reduce` would be cumbersome, providing a cleaner way to manage motion-related styles.

SOURCE: https://tailwindcss.com/docs/hover-focus-and-other-states

LANGUAGE: HTML
CODE:
```
<!-- Using `motion-reduce` can mean lots of "undoing" styles --><button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ...">  Save changes</button><!-- Using `motion-safe` is less code in these situations --><button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</button>
```

----------------------------------------

TITLE: Tailwind CSS Utility Categories and Properties Reference
DESCRIPTION: A structured reference of core Tailwind CSS utility categories and the CSS properties they control, including effects, filters, table styling, transitions, animations, transforms, interactivity, SVG, and accessibility.

SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit

LANGUAGE: APIDOC
CODE:
```
Effects:
  - box-shadow
  - text-shadow
  - opacity
  - mix-blend-mode
  - background-blend-mode
  - mask-clip
  - mask-composite
  - mask-image
  - mask-mode
  - mask-origin
  - mask-position
  - mask-repeat
  - mask-size
  - mask-type

Filters:
  - filter
    - blur
    - brightness
    - contrast
    - drop-shadow
    - grayscale
    - hue-rotate
    - invert
    - saturate
    - sepia
  - backdrop-filter
    - blur
    - brightness
    - contrast
    - grayscale
    - hue-rotate
    - invert
    - opacity
    - saturate
    - sepia

Tables:
  - border-collapse
  - border-spacing
  - table-layout
  - caption-side

Transitions & Animation:
  - transition-property
  - transition-behavior
  - transition-duration
  - transition-timing-function
  - transition-delay
  - animation

Transforms:
  - backface-visibility
  - perspective
  - perspective-origin
  - rotate
  - scale
  - skew
  - transform
  - transform-origin
  - transform-style
  - translate

Interactivity:
  - accent-color
  - appearance
  - caret-color
  - color-scheme
  - cursor
  - field-sizing
  - pointer-events
  - resize
  - scroll-behavior
  - scroll-margin
  - scroll-padding
  - scroll-snap-align
  - scroll-snap-stop
  - scroll-snap-type
  - touch-action
  - user-select
  - will-change

SVG:
  - fill
  - stroke
  - stroke-width

Accessibility:
  - forced-color-adjust
```

----------------------------------------

TITLE: Apply Custom Transition Timing Functions in HTML
DESCRIPTION: Illustrates the use of arbitrary value syntax (`ease-[<value>]`) and CSS variable syntax (`ease-(<custom-property>)`) in Tailwind CSS to define custom transition timing functions for HTML elements. This allows for highly specific easing curves beyond the predefined utilities.

SOURCE: https://tailwindcss.com/docs/transition-timing-function

LANGUAGE: HTML
CODE:
```
<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ...">  <!-- ... --></button>
```

LANGUAGE: HTML
CODE:
```
<button class="ease-(--my-ease) ...">  <!-- ... --></button>
```

----------------------------------------

TITLE: Tailwind CSS Utility Class Reference
DESCRIPTION: A comprehensive reference for various Tailwind CSS utility classes categorized by their functional area, including visual effects, filters, table styling, transitions, animations, transformations, interactivity, SVG properties, and accessibility.

SOURCE: https://tailwindcss.com/docs/flex

LANGUAGE: APIDOC
CODE:
```
Effects:
  - box-shadow
  - text-shadow
  - opacity
  - mix-blend-mode
  - background-blend-mode
  - mask-clip
  - mask-composite
  - mask-image
  - mask-mode
  - mask-origin
  - mask-position
  - mask-repeat
  - mask-size
  - mask-type

Filters:
  - filter:
    - blur
    - brightness
    - contrast
    - drop-shadow
    - grayscale
    - hue-rotate
    - invert
    - saturate
    - sepia
  - backdrop-filter:
    - blur
    - brightness
    - contrast
    - grayscale
    - hue-rotate
    - invert
    - opacity
    - saturate
    - sepia

Tables:
  - border-collapse
  - border-spacing
  - table-layout
  - caption-side

Transitions & Animation:
  - transition-property
  - transition-behavior
  - transition-duration
  - transition-timing-function
  - transition-delay
  - animation

Transforms:
  - backface-visibility
  - perspective
  - perspective-origin
  - rotate
  - scale
  - skew
  - transform
  - transform-origin
  - transform-style
  - translate

Interactivity:
  - accent-color
  - appearance
  - caret-color
  - color-scheme
  - cursor
  - field-sizing
  - pointer-events
  - resize
  - scroll-behavior
  - scroll-margin
  - scroll-padding
  - scroll-snap-align
  - scroll-snap-stop
  - scroll-snap-type
  - touch-action
  - user-select
  - will-change

SVG:
  - fill
  - stroke
  - stroke-width

Accessibility:
  - forced-color-adjust
```

----------------------------------------

TITLE: Tailwind CSS Transition Timing Function Utilities
DESCRIPTION: Documents the utility classes provided by Tailwind CSS for controlling the easing of CSS transitions, including linear, ease-in, ease-out, ease-in-out, and custom values. It details the class names and their corresponding CSS `transition-timing-function` properties.

SOURCE: https://tailwindcss.com/docs/transition-timing-function

LANGUAGE: APIDOC
CODE:
```
Class | Styles
--- | ---
`ease-linear` | `transition-timing-function: linear;`
`ease-in` | `transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */`
`ease-out` | `transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */`
`ease-in-out` | `transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */`
`ease-initial` | `transition-timing-function: initial;`
`ease-(<custom-property>)` | `transition-timing-function: var(<custom-property>);`
`ease-[<value>]` | `transition-timing-function: <value>;`
```

----------------------------------------

TITLE: Accessing Tailwind CSS v4 Theme Values in JavaScript
DESCRIPTION: Tailwind CSS v4 removes the `resolveConfig` function, promoting direct use of generated CSS variables. This snippet demonstrates how to animate using CSS variables with libraries like Motion and how to retrieve resolved CSS variable values in JavaScript using `getComputedStyle` from the document root.

SOURCE: https://tailwindcss.com/docs/upgrade-guide

LANGUAGE: JSX
CODE:
```
<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />
```

LANGUAGE: JavaScript
CODE:
```
let styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue("--shadow-xl");
```

----------------------------------------

TITLE: Tailwind CSS will-change Utility Classes
DESCRIPTION: Documentation for Tailwind CSS `will-change` utility classes, which optimize elements for upcoming animations by instructing the browser to prepare. It includes classes for auto, scroll-position, contents, transform, and custom property/value changes, along with usage guidelines and performance considerations.

SOURCE: https://tailwindcss.com/docs/will-change

LANGUAGE: APIDOC
CODE:
```
will-change Utility Classes:

Class                 | Styles
----------------------|------------------------------------
`will-change-auto`    | `will-change: auto;`
`will-change-scroll`  | `will-change: scroll-position;`
`will-change-contents`| `will-change: contents;`
`will-change-transform`| `will-change: transform;`
`will-change-<custom-property>`| `will-change: var(<custom-property>);`
`will-change-[<value>]`| `will-change: <value>;`

Usage Examples:

Optimizing with will change:
Use `will-change-scroll`, `will-change-contents`, and `will-change-transform` to optimize an element expected to change.
Recommendation: Apply these utilities just before an element changes and remove them shortly after using `will-change-auto`.
Caution: Use `will-change` as a last resort for known performance problems, as overuse can degrade performance.

Using a custom value:
Use `will-change-[<value>]` for completely custom values.
For CSS variables, use `will-change-(<custom-property>)` as a shorthand for `will-change-[var(<custom-property>)]`.
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: Documents the Tailwind CSS utility classes for applying 2D and 3D transformations to elements, such as rotation, scaling, skewing, translation, and controlling perspective and transform origin.

SOURCE: https://tailwindcss.com/docs/backface-visibility

LANGUAGE: APIDOC
CODE:
```
Transforms:
- backface-visibility
- perspective
- perspective-origin
- rotate
- scale
- skew
- transform
- transform-origin
- transform-style
- translate
```

----------------------------------------

TITLE: Tailwind CSS Table, Transition, Transform, Interactivity, SVG, and Accessibility Utility Classes
DESCRIPTION: This section provides a reference for Tailwind CSS utility classes related to table styling, transitions, animations, 2D/3D transforms, user interactivity, SVG properties, and accessibility features.

SOURCE: https://tailwindcss.com/docs/place-content

LANGUAGE: APIDOC
CODE:
```
Tables:
- border-collapse: Sets whether table borders are collapsed into a single border or separated.
- border-spacing: Sets the distance between the borders of adjacent cells.
- table-layout: Sets the algorithm used to lay out table cells, rows, and columns.
- caption-side: Specifies the placement of a table caption.

Transitions & Animation:
- transition-property: Specifies the CSS properties to which a transition effect should be applied.
- transition-behavior: Defines whether a transition should be applied to discrete properties.
- transition-duration: Sets the duration of a transition effect.
- transition-timing-function: Specifies the speed curve of a transition effect.
- transition-delay: Specifies when the transition effect will start.
- animation: Shorthand property for animation properties.

Transforms:
- backface-visibility: Defines whether the back face of an element is visible when turned towards the user.
- perspective: Specifies the distance between the user and the z=0 plane.
- perspective-origin: Sets the origin for the perspective property.
- rotate: Applies a 2D or 3D rotation transformation.
- scale: Applies a 2D or 3D scaling transformation.
- skew: Applies a 2D skew transformation.
- transform: Applies 2D or 3D transformations to an element.
- transform-origin: Sets the origin for transformations of an element.
- transform-style: Specifies how nested elements are rendered in 3D space.
- translate: Applies a 2D or 3D translation transformation.

Interactivity:
- accent-color: Sets the accent color for user-interface controls.
- appearance: Controls the native appearance of UI widgets.
- caret-color: Sets the color of the text insertion caret.
- color-scheme: Specifies the color scheme an element is comfortable with.
- cursor: Specifies the type of cursor to be displayed.
- field-sizing: Controls the sizing of form fields.
- pointer-events: Sets whether an element is the target of pointer events.
- resize: Specifies whether an element is resizable by the user.
- scroll-behavior: Specifies the scrolling behavior for a scrolling box.
- scroll-margin: Sets the scroll margin of an element.
- scroll-padding: Sets the scroll padding of an element.
- scroll-snap-align: Specifies the snap position for a scroll container.
- scroll-snap-stop: Specifies whether the scroll container must snap to a snap position.
- scroll-snap-type: Specifies how strictly snap points are enforced.
- touch-action: Specifies how a touch event can be handled.
- user-select: Controls whether the user can select text.
- will-change: Hints to browsers about what changes will be made to an element.

SVG:
- fill: Sets the color of the interior of an SVG shape.
- stroke: Sets the color of the outline of an SVG shape.
- stroke-width: Sets the width of the outline of an SVG shape.

Accessibility:
- forced-color-adjust: Specifies whether the user agent should adjust colors for forced colors mode.
```

----------------------------------------

TITLE: Tailwind CSS Core Properties Reference
DESCRIPTION: This section provides a comprehensive reference for various Tailwind CSS utility classes and their corresponding CSS properties, categorized by functionality. It details properties related to visual effects, image filters, table styling, animation and transitions, 2D/3D transformations, user interactivity, SVG elements, and accessibility features.

SOURCE: https://tailwindcss.com/docs/installation/using-vite

LANGUAGE: APIDOC
CODE:
```
Effects:
  - box-shadow: Controls the shadow effect around an element's frame.
  - text-shadow: Controls the shadow effect around text.
  - opacity: Sets the transparency level of an element.
  - mix-blend-mode: Describes how an element's content should blend with its background.
  - background-blend-mode: Describes how an element's background images should blend with each other and with the element's background color.
  - mask-clip: Specifies the area which is affected by the mask.
  - mask-composite: Represents the compositing operation used on the current mask layer with the mask layers below it.
  - mask-image: Sets the image that is used as a mask layer for an element.
  - mask-mode: Specifies whether the mask image is treated as a luminance mask or an alpha mask.
  - mask-origin: Specifies the origin of the mask image.
  - mask-position: Sets the initial position for each background image.
  - mask-repeat: Sets how mask images are repeated.
  - mask-size: Specifies the size of the mask images.
  - mask-type: Specifies whether a mask element is treated as a luminance mask or an alpha mask.

Filters:
  - filter: Applies graphical effects like blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, and sepia to an element.
    - blur: Applies a Gaussian blur to the input image.
    - brightness: Applies a linear multiplier to the input image, making it brighter or darker.
    - contrast: Adjusts the contrast of the input image.
    - drop-shadow: Applies a drop shadow to the input image.
    - grayscale: Converts the input image to grayscale.
    - hue-rotate: Applies a hue rotation to the input image.
    - invert: Inverts the colors of the input image.
    - saturate: Saturates or desaturates the input image.
    - sepia: Converts the input image to sepia.
  - backdrop-filter: Applies graphical effects to the area behind an element.
    - blur: Applies a Gaussian blur to the backdrop.
    - brightness: Adjusts the brightness of the backdrop.
    - contrast: Adjusts the contrast of the backdrop.
    - grayscale: Converts the backdrop to grayscale.
    - hue-rotate: Applies a hue rotation to the backdrop.
    - invert: Inverts the colors of the backdrop.
    - opacity: Sets the transparency level of the backdrop.
    - saturate: Saturates or desaturates the backdrop.
    - sepia: Converts the backdrop to sepia.

Tables:
  - border-collapse: Sets whether table borders are collapsed into a single border or separated.
  - border-spacing: Sets the distance between the borders of adjacent cells.
  - table-layout: Sets the algorithm used to lay out table cells, rows, and columns.
  - caption-side: Specifies the placement of a table caption.

Transitions & Animation:
  - transition-property: Specifies the CSS properties to which a transition effect should be applied.
  - transition-behavior: Defines whether a transition should be skipped when the element is first rendered.
  - transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.
  - transition-timing-function: Specifies the speed curve of the transition effect.
  - transition-delay: Specifies when the transition effect will start.
  - animation: A shorthand property for all the animation properties.

Transforms:
  - backface-visibility: Defines whether or not the back face of an element is visible when facing the user.
  - perspective: Specifies the distance between the user and the z=0 plane, to give a 3D-positioned element some perspective.
  - perspective-origin: Sets the origin for the perspective property.
  - rotate: Rotates an element around a fixed point.
  - scale: Scales an element up or down.
  - skew: Skews an element along the X and Y axes.
  - transform: Applies a 2D or 3D transformation to an element.
  - transform-origin: Sets the origin for transformations of an element.
  - transform-style: Specifies how nested elements are rendered in 3D space.
  - translate: Moves an element from its current position.

Interactivity:
  - accent-color: Sets the accent color for user-interface controls generated by the element.
  - appearance: Controls the native appearance of UI widgets.
  - caret-color: Sets the color of the caret (text input cursor).
  - color-scheme: Allows an element to indicate which color schemes it is comfortable with.
  - cursor: Specifies the type of cursor to be displayed when pointing over an element.
  - field-sizing: Controls the sizing of form fields.
  - pointer-events: Sets under what circumstances (if any) a graphic element can be the target of pointer events.
  - resize: Specifies whether an element is resizable by the user.
  - scroll-behavior: Specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSS scroll-snap positioning.
  - scroll-margin: Sets the margin of the scroll snap area around the box.
  - scroll-padding: Sets the padding of the scroll snap area around the box.
  - scroll-snap-align: Specifies the snap position for an element within its scroll container.
  - scroll-snap-stop: Specifies whether the scroll container must snap to a snap point or can pass over it.
  - scroll-snap-type: Specifies how strictly snap points are enforced on the scroll container.
  - touch-action: Determines how a touch event (or series of events) can be handled by the browser.
  - user-select: Controls whether the user can select text.
  - will-change: Hints to browsers how an element is expected to change.

SVG:
  - fill: Sets the color of the interior of an SVG shape.
  - stroke: Sets the color of the outline of an SVG shape.
  - stroke-width: Sets the width of the outline of an SVG shape.

Accessibility:
  - forced-color-adjust: Controls whether the user agent can make adjustments to colors to improve readability in forced color modes.
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: API documentation for Tailwind CSS utilities that apply 2D and 3D transformations to elements, such as rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/text-decoration-color

LANGUAGE: APIDOC
CODE:
```
Transforms Properties:
- backface-visibility
- perspective
- perspective-origin
- rotate
- scale
- skew
- transform
- transform-origin
- transform-style
- translate
```

----------------------------------------

TITLE: TailwindCSS Transform Utilities
DESCRIPTION: Documentation for TailwindCSS utilities that apply 2D and 3D transformations to elements, including rotation, scaling, skewing, translation, and perspective effects.

SOURCE: https://tailwindcss.com/docs/color

LANGUAGE: APIDOC
CODE:
```
backface-visibility
perspective
perspective-origin
rotate
scale
skew
transform
transform-origin
transform-style
translate
```

----------------------------------------

TITLE: Tailwind CSS Utility Categories and Properties
DESCRIPTION: This section lists various categories of Tailwind CSS utilities and the specific CSS properties they control. It serves as a quick reference for available styling options within each domain, such as visual effects, filters, table layouts, animations, transformations, user interaction, SVG styling, and accessibility features.

SOURCE: https://tailwindcss.com/docs/order

LANGUAGE: APIDOC
CODE:
```
Effects:
  - box-shadow
  - text-shadow
  - opacity
  - mix-blend-mode
  - background-blend-mode
  - mask-clip
  - mask-composite
  - mask-image
  - mask-mode
  - mask-origin
  - mask-position
  - mask-repeat
  - mask-size
  - mask-type

Filters:
  - filter
    - blur
    - brightness
    - contrast
    - drop-shadow
    - grayscale
    - hue-rotate
    - invert
    - saturate
    - sepia
  - backdrop-filter
    - blur
    - brightness
    - contrast
    - grayscale
    - hue-rotate
    - invert
    - opacity
    - saturate
    - sepia

Tables:
  - border-collapse
  - border-spacing
  - table-layout
  - caption-side

Transitions & Animation:
  - transition-property
  - transition-behavior
  - transition-duration
  - transition-timing-function
  - transition-delay
  - animation

Transforms:
  - backface-visibility
  - perspective
  - perspective-origin
  - rotate
  - scale
  - skew
  - transform
  - transform-origin
  - transform-style
  - translate

Interactivity:
  - accent-color
  - appearance
  - caret-color
  - color-scheme
  - cursor
  - field-sizing
  - pointer-events
  - resize
  - scroll-behavior
  - scroll-margin
  - scroll-padding
  - scroll-snap-align
  - scroll-snap-stop
  - scroll-snap-type
  - touch-action
  - user-select
  - will-change

SVG:
  - fill
  - stroke
  - stroke-width

Accessibility:
  - forced-color-adjust
```

----------------------------------------

TITLE: Define and Use Custom Transition Timing Function in Tailwind CSS Theme
DESCRIPTION: This example shows how to define a custom `transition-timing-function` variable within the `@theme` directive in Tailwind CSS, extending the default set of easing functions. Subsequently, it demonstrates how to apply this newly defined custom utility class, `ease-in-expo`, to an HTML element.

SOURCE: https://tailwindcss.com/docs/transition-timing-function

LANGUAGE: css
CODE:
```
@theme {  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }
```

LANGUAGE: html
CODE:
```
<button class="ease-in-expo">  <!-- ... --></button>
```

----------------------------------------

TITLE: TailwindCSS Transform Utilities
DESCRIPTION: Documentation for TailwindCSS utilities that apply 2D and 3D transformations like rotation, scaling, skewing, and translation to elements.

SOURCE: https://tailwindcss.com/docs/box-shadow

LANGUAGE: APIDOC
CODE:
```
backface-visibility
perspective
perspective-origin
rotate
scale
skew
transform
transform-origin
transform-style
translate
```

----------------------------------------

TITLE: Apply Responsive Transition Timing Function in Tailwind CSS
DESCRIPTION: This snippet demonstrates how to apply a `transition-timing-function` utility responsively in Tailwind CSS. The `ease-out` class is applied by default, and `md:ease-in` overrides it for medium screen sizes and above, changing the easing from `ease-out` to `ease-in`.

SOURCE: https://tailwindcss.com/docs/transition-timing-function

LANGUAGE: html
CODE:
```
<button class="ease-out md:ease-in ...">  <!-- ... --></button>
```

----------------------------------------

TITLE: TailwindCSS Transform Utilities
DESCRIPTION: Documents TailwindCSS utilities for applying 2D and 3D transformations to elements. These utilities include properties for controlling backface visibility, perspective, rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/background-image

LANGUAGE: APIDOC
CODE:
```
Transform Utilities:
- backface-visibility: Specifies whether the back face of an element is visible when turned towards the user.
- perspective: Defines how a 3D element is viewed.
- perspective-origin: Sets the origin for the perspective property.
- rotate: Rotates an element around a fixed point.
- scale: Scales an element up or down.
- skew: Skews an element along the X and Y axes.
- transform: Applies a 2D or 3D transformation to an element.
- transform-origin: Sets the origin for transformations.
- transform-style: Specifies how nested elements are rendered in 3D space.
- translate: Moves an element from its current position.
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: This section documents Tailwind CSS utility classes for applying 2D and 3D transformations to elements, such as rotation, scaling, skewing, and translation. It also includes properties for perspective and transform origin.

SOURCE: https://tailwindcss.com/docs/float

LANGUAGE: APIDOC
CODE:
```
Tailwind CSS Transform Utilities:
- backface-visibility: Utilities for controlling whether the back face of an element is visible when rotated.
- perspective: Utilities for controlling the distance between the user and the z=0 plane.
- perspective-origin: Utilities for controlling the origin of the perspective property.
- rotate: Utilities for rotating elements.
- scale: Utilities for scaling elements.
- skew: Utilities for skewing elements.
- transform: Utilities for applying 2D or 3D transformations to an element.
- transform-origin: Utilities for controlling the origin of an element's transformation.
- transform-style: Utilities for controlling how nested elements are rendered in 3D space.
- translate: Utilities for translating elements.
```

----------------------------------------

TITLE: Tailwind CSS Utility Classes Reference
DESCRIPTION: A comprehensive reference of Tailwind CSS utility classes categorized by their functional areas. These classes provide direct control over various CSS properties for rapid UI development, covering visual effects, filtering, table styling, animation, transformations, user interaction, SVG properties, and accessibility features.

SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite

LANGUAGE: APIDOC
CODE:
```
Effects:
  - box-shadow
  - text-shadow
  - opacity
  - mix-blend-mode
  - background-blend-mode
  - mask-clip
  - mask-composite
  - mask-image
  - mask-mode
  - mask-origin
  - mask-position
  - mask-repeat
  - mask-size
  - mask-type

Filters:
  - filter
    - blur
    - brightness
    - contrast
    - drop-shadow
    - grayscale
    - hue-rotate
    - invert
    - saturate
    - sepia
  - backdrop-filter
    - blur
    - brightness
    - contrast
    - grayscale
    - hue-rotate
    - invert
    - opacity
    - saturate
    - sepia

Tables:
  - border-collapse
  - border-spacing
  - table-layout
  - caption-side

Transitions & Animation:
  - transition-property
  - transition-behavior
  - transition-duration
  - transition-timing-function
  - transition-delay
  - animation

Transforms:
  - backface-visibility
  - perspective
  - perspective-origin
  - rotate
  - scale
  - skew
  - transform
  - transform-origin
  - transform-style
  - translate

Interactivity:
  - accent-color
  - appearance
  - caret-color
  - color-scheme
  - cursor
  - field-sizing
  - pointer-events
  - resize
  - scroll-behavior
  - scroll-margin
  - scroll-padding
  - scroll-snap-align
  - scroll-snap-stop
  - scroll-snap-type
  - touch-action
  - user-select
  - will-change

SVG:
  - fill
  - stroke
  - stroke-width

Accessibility:
  - forced-color-adjust
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: Documents utility classes for applying 2D and 3D transformations to elements, including rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/border-width

LANGUAGE: APIDOC
CODE:
```
Transforms:
  backface-visibility: Utility for determining whether the back face of an element is visible when facing the user.
  perspective: Utility for setting the distance between the user and the z=0 plane, to give a 3D-positioned element some perspective.
  perspective-origin: Utility for setting the origin for the perspective property.
  rotate: Utility for applying a rotation transformation.
  scale: Utility for applying a scaling transformation.
  skew: Utility for applying a skew transformation.
  transform: Utility for applying 2D or 3D transformations to an element.
  transform-origin: Utility for setting the origin of an element's transformation.
  transform-style: Utility for setting how nested elements are rendered in 3D space.
  translate: Utility for applying a translation transformation.
```

----------------------------------------

TITLE: Combine Multiple Gradient Masks in HTML
DESCRIPTION: Shows how to combine various gradient mask utilities, such as `mask-b-from-<value>`, `mask-radial-[<value>]`, and `mask-radial-from-<value>`, on a single HTML element. This technique allows for the creation of more complex and layered mask effects, leveraging Tailwind's default `mask-composite` property set to `intersect`.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: HTML
CODE:
```
<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>
```

----------------------------------------

TITLE: Apply Tailwind CSS transform-style for 3D Transformations
DESCRIPTION: Demonstrates the application of `transform-flat` and `transform-3d` utility classes to parent elements to control the 3D positioning of their children. This example shows how child elements behave differently in 2D (flat) versus 3D (preserve-3d) transformation contexts.

SOURCE: https://tailwindcss.com/docs/transform-style

LANGUAGE: HTML
CODE:
```
<div class="size-20 transform-flat ...">  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div><div class="size-20 transform-3d ...">  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div>
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: Provides Tailwind CSS utility classes for applying 2D and 3D transformations to elements, such as rotations, scaling, skewing, and translations. It also includes utilities for controlling perspective and transform origins.

SOURCE: https://tailwindcss.com/docs/text-decoration-style

LANGUAGE: APIDOC
CODE:
```
backface-visibility: backface-visibility
perspective: perspective
perspective-origin: perspective-origin
rotate: rotate(...)
scale: scale(...)
skew: skew(...)
transform: transform
transform-origin: transform-origin
transform-style: transform-style
translate: translate(...)
```

----------------------------------------

TITLE: HTML Example for Floating Elements with Tailwind CSS
DESCRIPTION: An HTML snippet demonstrating the use of the `float-right` utility class from Tailwind CSS to position an image to the right of its container, allowing text to wrap around it.

SOURCE: https://tailwindcss.com/docs/float

LANGUAGE: HTML
CODE:
```
<article>  <img class="float-right ..." src="/img/mountains.jpg" />  <p>Maybe we can live without libraries, people like you and me. ...</p></article>
```

----------------------------------------

TITLE: Tailwind CSS Transforms Utilities Reference
DESCRIPTION: Documents the utility classes available in Tailwind CSS for applying 2D and 3D transformations like rotation, scaling, skewing, and translation, along with perspective and transform origin.

SOURCE: https://tailwindcss.com/docs/outline-width

LANGUAGE: APIDOC
CODE:
```
### Transforms
* backface-visibility
* perspective
* perspective-origin
* rotate
* scale
* skew
* transform
* transform-origin
* transform-style
* translate
```

----------------------------------------

TITLE: Tailwind CSS Transform Utility Classes
DESCRIPTION: Documents Tailwind CSS utility classes for applying 2D and 3D transformations to elements, including rotation, scaling, skewing, and translation. It also covers properties related to 3D perspective and transform origins.

SOURCE: https://tailwindcss.com/docs/user-select

LANGUAGE: APIDOC
CODE:
```
Transforms Utilities:
  backface-visibility: Defines whether the back face of an element is visible when turned towards the user.
  perspective: Specifies the distance between the user and the z=0 plane, for 3D transformed elements.
  perspective-origin: Sets the origin for the perspective property.
  rotate: Rotates an element around its origin.
  scale: Scales an element up or down.
  skew: Skews an element along the X and Y axes.
  transform: Applies a 2D or 3D transformation to an element.
  transform-origin: Sets the origin for transformations of an element.
  transform-style: Specifies how nested elements are rendered in 3D space.
  translate: Moves an element along the X and Y axes.
```

----------------------------------------

TITLE: Tailwind CSS box-decoration-break Utility Classes
DESCRIPTION: Documentation for the `box-decoration-break` utility, which controls how element fragments are rendered across multiple lines, columns, or pages. It defines two primary classes: `box-decoration-clone` and `box-decoration-slice`.

SOURCE: https://tailwindcss.com/docs/box-decoration-break

LANGUAGE: APIDOC
CODE:
```
box-decoration-break:
  box-decoration-clone: `box-decoration-break: clone` - Renders properties as if the element were one continuous fragment.
  box-decoration-slice: `box-decoration-break: slice` - Renders properties as distinct blocks for each fragment.
```

----------------------------------------

TITLE: Implement Conic Gradient Masks with Tailwind CSS
DESCRIPTION: Illustrates the application of Tailwind CSS conic mask utilities such as `mask-conic-from-<value>` and `mask-conic-to-<value>` to create a conic gradient effect. This example shows a progress indicator-like design using nested `div` elements with different border and mask properties.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: HTML
CODE:
```
<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">  <div class="grid grid-cols-1 grid-rows-1">    <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>    <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>  </div>  <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">    <p class="font-medium">Storage used: 75%</p>    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</p>  </div></div>
```

----------------------------------------

TITLE: Apply Logical Floats (Start/End) with Tailwind CSS
DESCRIPTION: This HTML snippet illustrates the use of `float-start` for logical floating, which adapts to text direction (left-to-right or right-to-left). It shows how to float an image to the start of its container, demonstrating its behavior in both LTR and RTL contexts.

SOURCE: https://tailwindcss.com/docs/float

LANGUAGE: HTML
CODE:
```
<article>  <img class="float-start ..." src="/img/mountains.jpg" />  <p>Maybe we can live without libraries, people like you and me. ...</p></article>
```

LANGUAGE: HTML
CODE:
```
<article dir="rtl">  <img class="float-start ..." src="/img/mountains.jpg" />  <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>
```

----------------------------------------

TITLE: HTML Example for Tailwind CSS `backface-visibility`
DESCRIPTION: Demonstrates the usage of `backface-hidden` and `backface-visible` utility classes in an HTML structure, typically for 3D transformations like rotating a cube, showing how the backface visibility affects rendering.

SOURCE: https://tailwindcss.com/docs/backface-visibility

LANGUAGE: HTML
CODE:
```
<div class="size-20 ...">  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...">1</div>  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...">2</div>  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...">3</div>  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...">4</div>  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...">5</div>  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...">6</div></div><div class="size-20 ...">  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...">1</div>  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...">2</div>  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...">3</div>  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...">4</div>  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...">5</div>  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...">6</div></div>
```

----------------------------------------

TITLE: Apply Conic Gradients with Tailwind CSS
DESCRIPTION: Demonstrates how to implement conic gradients on HTML elements using Tailwind CSS `bg-conic` and `bg-conic-<angle>` utilities, combined with color stop definitions and their positions.

SOURCE: https://tailwindcss.com/docs/background-image

LANGUAGE: HTML
CODE:
```
<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div><div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div><div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: This section details Tailwind CSS utility classes for applying 2D and 3D transformations to elements. It includes utilities for controlling backface visibility, perspective, rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/line-height

LANGUAGE: APIDOC
CODE:
```
Transforms:
- backface-visibility: Utilities for controlling whether the back face of an element is visible when rotated.
- perspective: Utilities for controlling the distance between the user and the z=0 plane.
- perspective-origin: Utilities for controlling the origin of the perspective property.
- rotate: Utilities for rotating elements.
- scale: Utilities for scaling elements.
- skew: Utilities for skewing elements.
- transform: Utilities for applying 2D or 3D transformations to an element.
- transform-origin: Utilities for controlling the origin of an element's transformations.
- transform-style: Utilities for controlling how nested elements are rendered in 3D space.
- translate: Utilities for translating elements.
```

----------------------------------------

TITLE: Tailwind CSS Mask Y-Axis Gradient Utilities
DESCRIPTION: Documents Tailwind CSS utility classes for creating linear gradient masks along the Y-axis (vertical), combining `to top` and `to bottom` gradients with `mask-composite: intersect`. These classes allow masks to originate or terminate from both top and bottom edges simultaneously, customizable with various value types.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: APIDOC
CODE:
```
mask-y-from-<value>
  - Applies a linear gradient mask starting from both top and bottom edges along the Y-axis.
  - Syntax:
    - `mask-y-from-<number>`: `mask-image: linear-gradient(to top, black calc(var(--spacing * <number>)), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing * <number>)), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`
    - `mask-y-from-<percentage>`: `mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`
    - `mask-y-from-<color>`: `mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`
    - `mask-y-from-(<custom-property>)`: `mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`
    - `mask-y-from-[<value>]`: `mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`
  - Parameters:
    - `<value>`: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value.

mask-y-to-<value>
  - Applies a linear gradient mask terminating towards both top and bottom edges along the Y-axis.
  - Syntax:
    - `mask-y-to-<number>`: `mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * <number>))), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * <number>))); mask-composite: intersect;`
    - `mask-y-to-<percentage>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), transparent <percentage>), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>); mask-composite: intersect;`
    - `mask-y-to-<color>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to)); mask-composite: intersect;`
  - Parameters:
    - `<value>`: Can be a number (multiplied by spacing variable), percentage, or color.
```

----------------------------------------

TITLE: Generating Multiple Tailwind CSS Classes with Ranges using `@source inline()`
DESCRIPTION: This example illustrates how to leverage brace expansion within the `@source inline()` directive to efficiently generate a series of related utility classes, including their variants. It's particularly useful for creating a range of color shades or sizes without listing each one individually.

SOURCE: https://tailwindcss.com/docs/detecting-classes-in-source-files

LANGUAGE: CSS
CODE:
```
@import "tailwindcss";
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
```

LANGUAGE: CSS
CODE:
```
.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);
  }
}
```

----------------------------------------

TITLE: Tailwind CSS Vertical Mask Utilities (`mask-y-to`)
DESCRIPTION: These utilities apply a vertical linear gradient mask to an element, allowing control over the mask's endpoint using custom properties or specific arbitrary values. They combine two linear gradients (to top and to bottom) with `mask-composite: intersect` for a combined masking effect.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: CSS
CODE:
```
mask-y-to-(<custom-property>): mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>)),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-y-to-[<value>]: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>); mask-composite: intersect;
```

----------------------------------------

TITLE: Making Images Inline with Tailwind CSS Utility
DESCRIPTION: While images are block-level by default in Tailwind CSS, you can easily override this behavior. This HTML snippet demonstrates how to use the `inline` utility class to change an image's display property to `inline` when needed.

SOURCE: https://tailwindcss.com/docs/preflight

LANGUAGE: HTML
CODE:
```
<img class="inline" src="..." alt="..." />
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: Covers Tailwind CSS utility classes for applying 2D and 3D transformations to elements, such as rotation, scaling, skewing, and translation, along with properties controlling perspective and transform origin.

SOURCE: https://tailwindcss.com/docs/filter-drop-shadow

LANGUAGE: APIDOC
CODE:
```
backface-visibility: Determines whether the back face of an element is visible when turned towards the user.
perspective: Defines how far the user is from the z=0 plane, giving a 3D-positioned element some perspective.
perspective-origin: Sets the origin for the perspective property.
rotate: Rotates an element around a fixed point.
scale: Scales an element up or down.
skew: Skews an element along the X and Y axes.
transform: Applies 2D or 3D transformations to an element.
transform-origin: Sets the origin for transformations of an element.
transform-style: Specifies how nested elements are rendered in 3D space.
translate: Moves an element from its current position.
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: This section documents CSS properties for applying 2D and 3D transformations to elements, such as rotation, scaling, skewing, and translation, along with perspective and origin controls.

SOURCE: https://tailwindcss.com/docs/text-color

LANGUAGE: APIDOC
CODE:
```
CSS Transform Properties:

backface-visibility: Defines whether or not the back face of an element is visible when facing the user.
perspective: Defines how far the object is from the user.
perspective-origin: Defines the origin (the x- and y-axis) of the perspective property.
rotate: Rotates an element around a fixed point.
scale: Scales an element up or down.
skew: Skews an element along the X and Y axes.
transform: Applies a 2D or 3D transformation to an element.
transform-origin: Sets the origin for transformations of an element.
transform-style: Specifies how nested elements are rendered in 3D space.
translate: Moves an element from its current position.
```

----------------------------------------

TITLE: Apply Tailwind CSS Translate Utilities in HTML
DESCRIPTION: Demonstrates how to apply Tailwind CSS `translate` utility classes to HTML `<img>` elements to shift their position on the page. Examples include negative and positive translations using the spacing scale.

SOURCE: https://tailwindcss.com/docs/translate

LANGUAGE: HTML
CODE:
```
<img class="-translate-6 ..." src="/img/mountains.jpg" /><img class="translate-2 ..." src="/img/mountains.jpg" /><img class="translate-8 ..." src="/img/mountains.jpg" />
```

----------------------------------------

TITLE: TailwindCSS Effects Utilities
DESCRIPTION: Documentation for TailwindCSS utilities related to visual effects like shadows, opacity, and blend modes, allowing control over how elements appear and interact visually.

SOURCE: https://tailwindcss.com/docs/box-shadow

LANGUAGE: APIDOC
CODE:
```
box-shadow
text-shadow
opacity
mix-blend-mode
background-blend-mode
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: API documentation for Tailwind CSS utility classes that apply 2D or 3D transformations to an element. These utilities control rotation, scaling, skewing, translation, and perspective effects.

SOURCE: https://tailwindcss.com/docs/flex-basis

LANGUAGE: APIDOC
CODE:
```
backface-visibility: Defines whether or not the back face of an element is visible when facing the user.
perspective: Defines how far the user is from the z-plane.
perspective-origin: Sets the origin for the perspective property.
rotate: Rotates an element.
scale: Scales an element.
skew: Skews an element.
transform: Applies a 2D or 3D transformation to an element.
transform-origin: Sets the origin for transformations.
transform-style: Specifies how nested elements are rendered in 3D space.
translate: Moves an element along the X, Y, or Z axis.
```

----------------------------------------

TITLE: Tailwind CSS Transform Utilities
DESCRIPTION: Documentation for Tailwind CSS utilities that apply 2D or 3D transformations to an element, such as rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/padding

LANGUAGE: APIDOC
CODE:
```
Transforms:
  - backface-visibility: Defines whether the back face of an element is visible when turned towards the user.
  - perspective: Defines how far the object is from the user.
  - perspective-origin: Defines the origin of the perspective for 3D transforms.
  - rotate: Rotates an element around a fixed point.
  - scale: Scales an element up or down.
  - skew: Skews an element along the X and Y axes.
  - transform: Applies a 2D or 3D transformation to an element.
  - transform-origin: Sets the origin for transformations of an element.
  - transform-style: Specifies how nested elements are rendered in 3D space.
  - translate: Moves an element from its current position.
```

----------------------------------------

TITLE: CSS Equivalent for Tailwind Complex Selector
DESCRIPTION: Illustrates the simplified CSS output corresponding to a complex Tailwind class, showing how media queries, pseudo-classes, and attribute selectors are combined.

SOURCE: https://tailwindcss.com/docs/styling-with-utility-classes

LANGUAGE: CSS
CODE:
```
@media (prefers-color-scheme: dark) and (width >= 64rem) {  button[data-current]:hover {    background-color: var(--color-indigo-600);  }}
```

----------------------------------------

TITLE: Tailwind CSS Transforms Utility Classes
DESCRIPTION: Reference for Tailwind CSS utility classes for applying CSS transforms like rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/background-size

LANGUAGE: APIDOC
CODE:
```
backface-visibility: Utilities for controlling whether the back face of an element is visible when rotated.
perspective: Utilities for controlling the perspective property.
perspective-origin: Utilities for controlling the perspective origin property.
rotate: Utilities for rotating elements.
scale: Utilities for scaling elements.
skew: Utilities for skewing elements.
transform: General utility for applying transforms.
transform-origin: Utilities for controlling the origin of an element's transform.
transform-style: Utilities for controlling how nested elements are rendered in 3D space.
translate: Utilities for translating elements.
```

----------------------------------------

TITLE: TailwindCSS Transform Utilities
DESCRIPTION: This section lists TailwindCSS utilities for applying 2D and 3D transformations to elements, such as rotation, scaling, skewing, translation, and perspective controls. These utilities enable complex visual manipulations and dynamic element positioning.

SOURCE: https://tailwindcss.com/docs/border-color

LANGUAGE: APIDOC
CODE:
```
backface-visibility
perspective
perspective-origin
rotate
scale
skew
transform
transform-origin
transform-style
translate
```

----------------------------------------

TITLE: CSS Transform Properties
DESCRIPTION: Documentation for CSS properties that apply 2D or 3D transformations to an element, such as rotation, scaling, skewing, and translation.

SOURCE: https://tailwindcss.com/docs/margin

LANGUAGE: APIDOC
CODE:
```
backface-visibility: Defines whether or not the back face of an element is visible when facing the user.
perspective: Defines how far the user is from the z=0 plane when viewing a 3D transformed element.
perspective-origin: Sets the origin for the perspective property.
rotate: Rotates an element around a fixed point.
scale: Scales an element up or down.
skew: Skews an element along the X and Y axes.
transform: Applies a 2D or 3D transformation to an element.
transform-origin: Sets the origin for transformations of an element.
transform-style: Specifies how nested elements are rendered in 3D space.
translate: Moves an element from its current position.
```

----------------------------------------

TITLE: Tailwind CSS Mask Left Gradient Utilities
DESCRIPTION: Provides Tailwind CSS utility classes for creating linear gradient masks that originate or terminate from the left edge of an element. These classes set the `mask-image` property using `linear-gradient(to left, ...)`, supporting various value types for customization.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: APIDOC
CODE:
```
mask-l-from-<value>
  - Applies a linear gradient mask starting from the left.
  - Syntax:
    - `mask-l-from-<number>`: `mask-image: linear-gradient(to left, black calc(var(--spacing * <number>)), transparent var(--tw-mask-left-to));`
    - `mask-l-from-<percentage>`: `mask-image: linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to));`
    - `mask-l-from-<color>`: `mask-image: linear-gradient(to left, <color> var(--tw-mask-left-from), transparent var(--tw-mask-left-to));`
    - `mask-l-from-(<custom-property>)`: `mask-image: linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to));`
    - `mask-l-from-[<value>]`: `mask-image: linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to));`
  - Parameters:
    - `<value>`: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value.

mask-l-to-<value>
  - Applies a linear gradient mask terminating towards the left edge.
  - Syntax:
    - `mask-l-to-<number>`: `mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * <number>)));`
    - `mask-l-to-<percentage>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent <percentage>);`
    - `mask-l-to-<color>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to));`
    - `mask-l-to-(<custom-property>)`: `mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>));`
    - `mask-l-to-[<value>]`: `mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>);`
  - Parameters:
    - `<value>`: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value.
```

----------------------------------------

TITLE: Tailwind CSS Horizontal Mask Utilities (`mask-x-from`, `mask-x-to`)
DESCRIPTION: These utilities apply horizontal linear gradient masks, controlling the mask's start (`from`) or end (`to`) point. They support numbers (multiplied by spacing), percentages, colors, custom properties, and arbitrary values, using `mask-composite: intersect` for effective masking.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: CSS
CODE:
```
mask-x-from-<number>: mask-image: linear-gradient(to right, black calc(var(--spacing * <number>)), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing * <number>)), transparent var(--tw-mask-left-to)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-from-<percentage>: mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-from-<color>: mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to)), linear-gradient(to left, <color> var(--tw-mask-left-from), transparent var(--tw-mask-left-to)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-from-(<custom-property>): mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-from-[<value>]: mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-to-<number>: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * <number>))), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * <number>))); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-to-<percentage>: mask-image: linear-gradient(to left, black var(--tw-mask-right-from), transparent <percentage>), linear-gradient(to left, black var(--tw-mask-left-from), transparent <percentage>); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-to-<color>: mask-image: linear-gradient(to left, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to)), linear-gradient(to left, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-to-(<custom-property>): mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>)),linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>)); mask-composite: intersect;
```

LANGUAGE: CSS
CODE:
```
mask-x-to-[<value>]: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>),linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>); mask-composite: intersect;
```

----------------------------------------

TITLE: Apply Basic Sepia Filters to Images in HTML
DESCRIPTION: Demonstrates how to apply different levels of sepia filters (none, 50%, 100%) to images using Tailwind CSS utility classes directly in HTML. This provides a quick visual comparison of the sepia effect.

SOURCE: https://tailwindcss.com/docs/filter-sepia

LANGUAGE: html
CODE:
```
<img class="sepia-0" src="/img/mountains.jpg" /><img class="sepia-50" src="/img/mountains.jpg" /><img class="sepia" src="/img/mountains.jpg" />
```

----------------------------------------

TITLE: Applying Tailwind CSS Perspective Utilities
DESCRIPTION: This example demonstrates how to use `perspective-dramatic` and `perspective-normal` utilities to control the perceived distance of elements along the Z-axis, affecting 3D transformations. It shows how different perspective values change the visual depth.

SOURCE: https://tailwindcss.com/docs/perspective

LANGUAGE: HTML
CODE:
```
<div class="size-20 perspective-dramatic ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>
<div class="size-20 perspective-normal ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>
```

----------------------------------------

TITLE: Tailwind CSS Mask Bottom Gradient Utilities
DESCRIPTION: Defines Tailwind CSS utility classes for creating linear gradient masks that originate or terminate from the bottom edge of an element. These classes control the `mask-image` property with `linear-gradient(to bottom, ...)`, allowing customization with numbers, percentages, colors, custom properties, or arbitrary values.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: APIDOC
CODE:
```
mask-b-from-<value>
  - Applies a linear gradient mask starting from the bottom.
  - Syntax:
    - `mask-b-from-<number>`: `mask-image: linear-gradient(to bottom, black calc(var(--spacing * <number>)), transparent var(--tw-mask-bottom-to));`
    - `mask-b-from-<percentage>`: `mask-image: linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to));`
    - `mask-b-from-<color>`: `mask-image: linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));`
    - `mask-b-from-(<custom-property>)`: `mask-image: linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to));`
    - `mask-b-from-[<value>]`: `mask-image: linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to));`
  - Parameters:
    - `<value>`: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value.

mask-b-to-<value>
  - Applies a linear gradient mask terminating towards the bottom edge.
  - Syntax:
    - `mask-b-to-<number>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * <number>)));`
    - `mask-b-to-<percentage>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>);`
    - `mask-b-to-<color>`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to));`
    - `mask-b-to-(<custom-property>)`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>));`
    - `mask-b-to-[<value>]`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>);`
  - Parameters:
    - `<value>`: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value.
```

----------------------------------------

TITLE: Tailwind CSS Effects Utilities
DESCRIPTION: Lists Tailwind CSS utility classes for applying various visual effects such as box shadows, text shadows, opacity, and blend modes. These classes directly map to their corresponding CSS properties.

SOURCE: https://tailwindcss.com/docs/text-decoration-style

LANGUAGE: APIDOC
CODE:
```
box-shadow: box-shadow
text-shadow: text-shadow
opacity: opacity
mix-blend-mode: mix-blend-mode
background-blend-mode: background-blend-mode
mask-clip: mask-clip
mask-composite: mask-composite
mask-image: mask-image
mask-mode: mask-mode
mask-origin: mask-origin
mask-position: mask-position
mask-repeat: mask-repeat
mask-size: mask-size
mask-type: mask-type
```

----------------------------------------

TITLE: Tailwind CSS mask-image Utility Classes
DESCRIPTION: Provides a comprehensive list of Tailwind CSS utility classes for controlling the `mask-image` CSS property. These utilities allow for setting custom mask images, applying linear gradients with specified angles, and creating directional gradients (top, right, bottom, left) with custom start/end points, percentages, colors, or custom CSS properties.

SOURCE: https://tailwindcss.com/docs/mask-image

LANGUAGE: APIDOC
CODE:
```
mask-[<value>]
  - Description: Sets a custom mask image value.
  - CSS: mask-image: <value>;

mask-(<custom-property>)
  - Description: Sets the mask image using a CSS custom property.
  - CSS: mask-image: var(<custom-property>);

mask-none
  - Description: Removes any mask image.
  - CSS: mask-image: none;

mask-linear-<number>
  - Description: Applies a linear gradient mask with a specified angle.
  - Parameters:
    - <number>: Angle in degrees.
  - CSS: mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));

-mask-linear-<number>
  - Description: Applies a linear gradient mask with a negative specified angle.
  - Parameters:
    - <number>: Angle in degrees.
  - CSS: mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));

mask-linear-from-<number>
  - Description: Sets the start point of a linear gradient mask from a numeric spacing value.
  - Parameters:
    - <number>: Multiplier for --spacing variable.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));

mask-linear-from-<percentage>
  - Description: Sets the start point of a linear gradient mask from a percentage.
  - Parameters:
    - <percentage>: Percentage value (e.g., 50%).
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));

mask-linear-from-<color>
  - Description: Sets the start color of a linear gradient mask.
  - Parameters:
    - <color>: Any valid CSS color value.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));

mask-linear-from-(<custom-property>)
  - Description: Sets the start point of a linear gradient mask using a CSS custom property.
  - Parameters:
    - <custom-property>: Name of a CSS custom property.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));

mask-linear-from-[<value>]
  - Description: Sets the start point of a linear gradient mask from an arbitrary value.
  - Parameters:
    - <value>: Any valid CSS value.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));

mask-linear-to-<number>
  - Description: Sets the end point of a linear gradient mask to a numeric spacing value.
  - Parameters:
    - <number>: Multiplier for --spacing variable.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing * <number>)));

mask-linear-to-<percentage>
  - Description: Sets the end point of a linear gradient mask to a percentage.
  - Parameters:
    - <percentage>: Percentage value (e.g., 50%).
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <percentage>);

mask-linear-to-<color>
  - Description: Sets the end color of a linear gradient mask.
  - Parameters:
    - <color>: Any valid CSS color value.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), <color> var(--tw-mask-linear-to));

mask-linear-to-(<custom-property>)
  - Description: Sets the end point of a linear gradient mask using a CSS custom property.
  - Parameters:
    - <custom-property>: Name of a CSS custom property.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var(<custom-property>));

mask-linear-to-[<value>]
  - Description: Sets the end point of a linear gradient mask to an arbitrary value.
  - Parameters:
    - <value>: Any valid CSS value.
  - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <value>);

mask-t-from-<number>
  - Description: Sets the start point of a top-directional linear gradient mask from a numeric spacing value.
  - Parameters:
    - <number>: Multiplier for --spacing variable.
  - CSS: mask-image: linear-gradient(to top, black calc(var(--spacing * <number>)), transparent var(--tw-mask-top-to));

mask-t-from-<percentage>
  - Description: Sets the start point of a top-directional linear gradient mask from a percentage.
  - Parameters:
    - <percentage>: Percentage value (e.g., 50%).
  - CSS: mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to));

mask-t-from-<color>
  - Description: Sets the start color of a top-directional linear gradient mask.
  - Parameters:
    - <color>: Any valid CSS color value.
  - CSS: mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to));

mask-t-from-(<custom-property>)
  - Description: Sets the start point of a top-directional linear gradient mask using a CSS custom property.
  - Parameters:
    - <custom-property>: Name of a CSS custom property.
  - CSS: mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to));

mask-t-from-[<value>]
  - Description: Sets the start point of a top-directional linear gradient mask from an arbitrary value.
  - Parameters:
    - <value>: Any valid CSS value.
  - CSS: mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to));

mask-t-to-<number>
  - Description: Sets the end point of a top-directional linear gradient mask to a numeric spacing value.
  - Parameters:
    - <number>: Multiplier for --spacing variable.
  - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * <number>));

mask-t-to-<percentage>
  - Description: Sets the end point of a top-directional linear gradient mask to a percentage.
  - Parameters:
    - <percentage>: Percentage value (e.g., 50%).
  - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <percentage>);

mask-t-to-<color>
  - Description: Sets the end color of a top-directional linear gradient mask.
  - Parameters:
    - <color>: Any valid CSS color value.
  - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to));

mask-t-to-(<custom-property>)
  - Description: Sets the end point of a top-directional linear gradient mask using a CSS custom property.
  - Parameters:
    - <custom-property>: Name of a CSS custom property.
  - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>));

mask-t-to-[<value>]
  - Description: Sets the end point of a top-directional linear gradient mask to an arbitrary value.
  - Parameters:
    - <value>: Any valid CSS value.
  - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>);

mask-r-from-<number>
  - Description: Sets the start point of a right-directional linear gradient mask from a numeric spacing value.
  - Parameters:
    - <number>: Multiplier for --spacing variable.
  - CSS: mask-image: linear-gradient(to right, black calc(var(--spacing * <number>)), transparent var(--tw-mask-right-to));

mask-r-from-<percentage>
  - Description: Sets the start point of a right-directional linear gradient mask from a percentage.
  - Parameters:
    - <percentage>: Percentage value (e.g., 50%).
  - CSS: mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to));

mask-r-from-<color>
  - Description: Sets the start color of a right-directional linear gradient mask.
  - Parameters:
    - <color>: Any valid CSS color value.
  - CSS: mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to));

mask-r-from-(<custom-property>)
  - Description: Sets the start point of a right-directional linear gradient mask using a CSS custom property.
  - Parameters:
    - <custom-property>: Name of a CSS custom property.
  - CSS: mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to));

mask-r-from-[<value>]
  - Description: Sets the start point of a right-directional linear gradient mask from an arbitrary value.
  - Parameters:
    - <value>: Any valid CSS value.
  - CSS: mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to));

mask-r-to-<number>
  - Description: Sets the end point of a right-directional linear gradient mask to a numeric spacing value.
  - Parameters:
    - <number>: Multiplier for --spacing variable.
  - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * <number>));

mask-r-to-<percentage>
  - Description: Sets the end point of a right-directional linear gradient mask to a percentage.
  - Parameters:
    - <percentage>: Percentage value (e.g., 50%).
  - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <percentage>);

mask-r-to-<color>
  - Description: Sets the end color of a right-directional linear gradient mask.
  - Parameters:
    - <color>: Any valid CSS color value.
  - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to));

mask-r-to-(<custom-property>)
  - Description: Sets the end point of a right-directional linear gradient mask using a CSS custom property.
  - Parameters:
    - <custom-property>: Name of a CSS custom property.
  - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>));

mask-r-to-[<value>]
  - Description: Sets the end point of a right-directional linear gradient mask to an arbitrary value.
  - Parameters:
    - <value>: Any valid CSS value.
  - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>);
```