diff --git "a/docu_code/Animation.txt" "b/docu_code/Animation.txt" deleted file mode 100644--- "a/docu_code/Animation.txt" +++ /dev/null @@ -1,2841 +0,0 @@ -======================== -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: -``` -
-``` - ----------------------------------------- - -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-()` | `animation: var();` | -| `animate-[]` | `animation: ;` -``` - ----------------------------------------- - -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: -``` -
-``` - ----------------------------------------- - -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: -``` -
-``` - -LANGUAGE: HTML -CODE: -``` -
-``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` -
-``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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-[]`) and CSS variable syntax (`ease-()`) 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: -``` - -``` - -LANGUAGE: HTML -CODE: -``` - -``` - ----------------------------------------- - -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-()` | `transition-timing-function: var();` -`ease-[]` | `transition-timing-function: ;` -``` - ----------------------------------------- - -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: -``` - -``` - -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-`| `will-change: var();` -`will-change-[]`| `will-change: ;` - -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-[]` for completely custom values. -For CSS variables, use `will-change-()` as a shorthand for `will-change-[var()]`. -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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: -``` - -``` - ----------------------------------------- - -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-`, `mask-radial-[]`, and `mask-radial-from-`, 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: -``` -
-``` - ----------------------------------------- - -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: -``` -
1
2
3
4
5
6
1
2
3
4
5
6
-``` - ----------------------------------------- - -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: -``` -

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

-``` - ----------------------------------------- - -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-` and `mask-conic-to-` 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: -``` -

Storage used: 75%

0.48 GB out of 2 GB remaining

-``` - ----------------------------------------- - -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: -``` -

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

-``` - -LANGUAGE: HTML -CODE: -``` -

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

-``` - ----------------------------------------- - -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: -``` -
1
2
3
4
5
6
1
2
3
4
5
6
-``` - ----------------------------------------- - -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-` utilities, combined with color stop definitions and their positions. - -SOURCE: https://tailwindcss.com/docs/background-image - -LANGUAGE: HTML -CODE: -``` -
-``` - ----------------------------------------- - -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- - - Applies a linear gradient mask starting from both top and bottom edges along the Y-axis. - - Syntax: - - `mask-y-from-`: `mask-image: linear-gradient(to top, black calc(var(--spacing * )), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing * )), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;` - - `mask-y-from-`: `mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to)); mask-composite: intersect;` - - `mask-y-from-`: `mask-image: linear-gradient(to top, var(--tw-mask-top-from), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;` - - `mask-y-from-()`: `mask-image: linear-gradient(to top, black var(), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black var(), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;` - - `mask-y-from-[]`: `mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to)); mask-composite: intersect;` - - Parameters: - - ``: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value. - -mask-y-to- - - Applies a linear gradient mask terminating towards both top and bottom edges along the Y-axis. - - Syntax: - - `mask-y-to-`: `mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * ))), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * ))); mask-composite: intersect;` - - `mask-y-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), transparent ), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent ); mask-composite: intersect;` - - `mask-y-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), var(--tw-mask-top-to)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), var(--tw-mask-bottom-to)); mask-composite: intersect;` - - Parameters: - - ``: 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-(): mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var()),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var()); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-y-to-[]: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent ),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent ); 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: -``` -... -``` - ----------------------------------------- - -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 `` 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: -``` - -``` - ----------------------------------------- - -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- - - Applies a linear gradient mask starting from the left. - - Syntax: - - `mask-l-from-`: `mask-image: linear-gradient(to left, black calc(var(--spacing * )), transparent var(--tw-mask-left-to));` - - `mask-l-from-`: `mask-image: linear-gradient(to left, black , transparent var(--tw-mask-left-to));` - - `mask-l-from-`: `mask-image: linear-gradient(to left, var(--tw-mask-left-from), transparent var(--tw-mask-left-to));` - - `mask-l-from-()`: `mask-image: linear-gradient(to left, black var(), transparent var(--tw-mask-left-to));` - - `mask-l-from-[]`: `mask-image: linear-gradient(to left, black , transparent var(--tw-mask-left-to));` - - Parameters: - - ``: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value. - -mask-l-to- - - Applies a linear gradient mask terminating towards the left edge. - - Syntax: - - `mask-l-to-`: `mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * )));` - - `mask-l-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent );` - - `mask-l-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), var(--tw-mask-left-to));` - - `mask-l-to-()`: `mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var());` - - `mask-l-to-[]`: `mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent );` - - Parameters: - - ``: 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-: mask-image: linear-gradient(to right, black calc(var(--spacing * )), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing * )), transparent var(--tw-mask-left-to)); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-from-: mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to)), linear-gradient(to left, black , transparent var(--tw-mask-left-to)); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-from-: mask-image: linear-gradient(to right, var(--tw-mask-right-from), transparent var(--tw-mask-right-to)), linear-gradient(to left, var(--tw-mask-left-from), transparent var(--tw-mask-left-to)); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-from-(): mask-image: linear-gradient(to right, black var(), transparent var(--tw-mask-right-to)), linear-gradient(to left, black var(), transparent var(--tw-mask-left-to)); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-from-[]: mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to)), linear-gradient(to left, black , transparent var(--tw-mask-left-to)); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-to-: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * ))), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * ))); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-to-: mask-image: linear-gradient(to left, black var(--tw-mask-right-from), transparent ), linear-gradient(to left, black var(--tw-mask-left-from), transparent ); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-to-: mask-image: linear-gradient(to left, black var(--tw-mask-right-from), var(--tw-mask-right-to)), linear-gradient(to left, black var(--tw-mask-left-from), var(--tw-mask-left-to)); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-to-(): mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var()),linear-gradient(to left, black var(--tw-mask-left-from), transparent var()); mask-composite: intersect; -``` - -LANGUAGE: CSS -CODE: -``` -mask-x-to-[]: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent ),linear-gradient(to left, black var(--tw-mask-left-from), transparent ); 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: -``` - -``` - ----------------------------------------- - -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: -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - ----------------------------------------- - -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- - - Applies a linear gradient mask starting from the bottom. - - Syntax: - - `mask-b-from-`: `mask-image: linear-gradient(to bottom, black calc(var(--spacing * )), transparent var(--tw-mask-bottom-to));` - - `mask-b-from-`: `mask-image: linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to));` - - `mask-b-from-`: `mask-image: linear-gradient(to bottom, var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));` - - `mask-b-from-()`: `mask-image: linear-gradient(to bottom, black var(), transparent var(--tw-mask-bottom-to));` - - `mask-b-from-[]`: `mask-image: linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to));` - - Parameters: - - ``: Can be a number (multiplied by spacing variable), percentage, color, custom CSS property, or an arbitrary value. - -mask-b-to- - - Applies a linear gradient mask terminating towards the bottom edge. - - Syntax: - - `mask-b-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * )));` - - `mask-b-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent );` - - `mask-b-to-`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), var(--tw-mask-bottom-to));` - - `mask-b-to-()`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var());` - - `mask-b-to-[]`: `mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent );` - - Parameters: - - ``: 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-[] - - Description: Sets a custom mask image value. - - CSS: mask-image: ; - -mask-() - - Description: Sets the mask image using a CSS custom property. - - CSS: mask-image: var(); - -mask-none - - Description: Removes any mask image. - - CSS: mask-image: none; - -mask-linear- - - Description: Applies a linear gradient mask with a specified angle. - - Parameters: - - : Angle in degrees. - - CSS: mask-image: linear-gradient(deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to)); - --mask-linear- - - Description: Applies a linear gradient mask with a negative specified angle. - - Parameters: - - : Angle in degrees. - - CSS: mask-image: linear-gradient(calc(deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to)); - -mask-linear-from- - - Description: Sets the start point of a linear gradient mask from a numeric spacing value. - - Parameters: - - : Multiplier for --spacing variable. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * )), transparent var(--tw-mask-linear-to)); - -mask-linear-from- - - Description: Sets the start point of a linear gradient mask from a percentage. - - Parameters: - - : Percentage value (e.g., 50%). - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black , transparent var(--tw-mask-linear-to)); - -mask-linear-from- - - Description: Sets the start color of a linear gradient mask. - - Parameters: - - : Any valid CSS color value. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to)); - -mask-linear-from-() - - Description: Sets the start point of a linear gradient mask using a CSS custom property. - - Parameters: - - : Name of a CSS custom property. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black , transparent var(--tw-mask-linear-to)); - -mask-linear-from-[] - - Description: Sets the start point of a linear gradient mask from an arbitrary value. - - Parameters: - - : Any valid CSS value. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black , transparent var(--tw-mask-linear-to)); - -mask-linear-to- - - Description: Sets the end point of a linear gradient mask to a numeric spacing value. - - Parameters: - - : Multiplier for --spacing variable. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing * ))); - -mask-linear-to- - - Description: Sets the end point of a linear gradient mask to a percentage. - - Parameters: - - : Percentage value (e.g., 50%). - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent ); - -mask-linear-to- - - Description: Sets the end color of a linear gradient mask. - - Parameters: - - : Any valid CSS color value. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), var(--tw-mask-linear-to)); - -mask-linear-to-() - - Description: Sets the end point of a linear gradient mask using a CSS custom property. - - Parameters: - - : Name of a CSS custom property. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var()); - -mask-linear-to-[] - - Description: Sets the end point of a linear gradient mask to an arbitrary value. - - Parameters: - - : Any valid CSS value. - - CSS: mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent ); - -mask-t-from- - - Description: Sets the start point of a top-directional linear gradient mask from a numeric spacing value. - - Parameters: - - : Multiplier for --spacing variable. - - CSS: mask-image: linear-gradient(to top, black calc(var(--spacing * )), transparent var(--tw-mask-top-to)); - -mask-t-from- - - Description: Sets the start point of a top-directional linear gradient mask from a percentage. - - Parameters: - - : Percentage value (e.g., 50%). - - CSS: mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to)); - -mask-t-from- - - Description: Sets the start color of a top-directional linear gradient mask. - - Parameters: - - : Any valid CSS color value. - - CSS: mask-image: linear-gradient(to top, var(--tw-mask-top-from), transparent var(--tw-mask-top-to)); - -mask-t-from-() - - Description: Sets the start point of a top-directional linear gradient mask using a CSS custom property. - - Parameters: - - : Name of a CSS custom property. - - CSS: mask-image: linear-gradient(to top, black var(), transparent var(--tw-mask-top-to)); - -mask-t-from-[] - - Description: Sets the start point of a top-directional linear gradient mask from an arbitrary value. - - Parameters: - - : Any valid CSS value. - - CSS: mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to)); - -mask-t-to- - - Description: Sets the end point of a top-directional linear gradient mask to a numeric spacing value. - - Parameters: - - : Multiplier for --spacing variable. - - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * )); - -mask-t-to- - - Description: Sets the end point of a top-directional linear gradient mask to a percentage. - - Parameters: - - : Percentage value (e.g., 50%). - - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent ); - -mask-t-to- - - Description: Sets the end color of a top-directional linear gradient mask. - - Parameters: - - : Any valid CSS color value. - - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), var(--tw-mask-top-to)); - -mask-t-to-() - - Description: Sets the end point of a top-directional linear gradient mask using a CSS custom property. - - Parameters: - - : Name of a CSS custom property. - - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var()); - -mask-t-to-[] - - Description: Sets the end point of a top-directional linear gradient mask to an arbitrary value. - - Parameters: - - : Any valid CSS value. - - CSS: mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent ); - -mask-r-from- - - Description: Sets the start point of a right-directional linear gradient mask from a numeric spacing value. - - Parameters: - - : Multiplier for --spacing variable. - - CSS: mask-image: linear-gradient(to right, black calc(var(--spacing * )), transparent var(--tw-mask-right-to)); - -mask-r-from- - - Description: Sets the start point of a right-directional linear gradient mask from a percentage. - - Parameters: - - : Percentage value (e.g., 50%). - - CSS: mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to)); - -mask-r-from- - - Description: Sets the start color of a right-directional linear gradient mask. - - Parameters: - - : Any valid CSS color value. - - CSS: mask-image: linear-gradient(to right, var(--tw-mask-right-from), transparent var(--tw-mask-right-to)); - -mask-r-from-() - - Description: Sets the start point of a right-directional linear gradient mask using a CSS custom property. - - Parameters: - - : Name of a CSS custom property. - - CSS: mask-image: linear-gradient(to right, black var(), transparent var(--tw-mask-right-to)); - -mask-r-from-[] - - Description: Sets the start point of a right-directional linear gradient mask from an arbitrary value. - - Parameters: - - : Any valid CSS value. - - CSS: mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to)); - -mask-r-to- - - Description: Sets the end point of a right-directional linear gradient mask to a numeric spacing value. - - Parameters: - - : Multiplier for --spacing variable. - - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * )); - -mask-r-to- - - Description: Sets the end point of a right-directional linear gradient mask to a percentage. - - Parameters: - - : Percentage value (e.g., 50%). - - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent ); - -mask-r-to- - - Description: Sets the end color of a right-directional linear gradient mask. - - Parameters: - - : Any valid CSS color value. - - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), var(--tw-mask-right-to)); - -mask-r-to-() - - Description: Sets the end point of a right-directional linear gradient mask using a CSS custom property. - - Parameters: - - : Name of a CSS custom property. - - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var()); - -mask-r-to-[] - - Description: Sets the end point of a right-directional linear gradient mask to an arbitrary value. - - Parameters: - - : Any valid CSS value. - - CSS: mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent ); -``` \ No newline at end of file