ArtMin96 · June 29, 2026 08:30
diff --git a/tailwind-v4-llms-full.txt b/tailwind-v4-llms-full.txt
 # Tailwind CSS v4

 > Tailwind CSS v4 is a utility-first CSS framework that scans source files for complete class name strings and generates only the CSS that is actually used, with zero runtime overhead. Version 4 is a full rewrite: JavaScript config files are replaced by CSS-native `@theme` blocks, all colors move to the OKLCH color space, Lightning CSS handles transforms and browser prefixes automatically, and the entry point changes from three `@tailwind` directives to a single `@import "tailwindcss"`. The recommended integration is a dedicated Vite plugin (`@tailwindcss/vite`). Minimum browser support: Chrome 111, Safari 16.4, Firefox 128. An automated upgrade tool (`npx @tailwindcss/upgrade`) handles roughly 90% of the v3-to-v4 migration.

 **Breaking changes LLMs frequently get wrong when generating v4 code:**

 - Shadow, blur, rounded, and ring size names shifted one step down — `shadow` → `shadow-sm`, `shadow-sm` → `shadow-xs`, `rounded` → `rounded-sm`, `blur` → `blur-sm`, etc.
 - The `!important` modifier moved from prefix to suffix: `flex!` not `!flex`
 - CSS variables in arbitrary values use parentheses, not brackets: `bg-(--my-var)` not `bg-[--my-var]`
 - Variant stacking order reversed to left-to-right: `*:first:pt-0` not `first:*:pt-0`
 - `hover:` is now wrapped in `@media (hover: hover)` — it no longer fires on touch-only devices
 - Default ring width is 1px (was 3px in v3); use `ring-3` to match v3's `ring`
 - Default ring color is `currentColor` (was blue-500 in v3)
 - `outline-none` renamed to `outline-hidden`
 - Default `border` color is `currentColor` (was gray-200 in v3)
 - `@apply` in Vue/Svelte `<style>` blocks requires `@reference "../../app.css"` first
 - `tailwind.config.js` is no longer auto-detected — must use `@config "../../tailwind.config.js"` explicitly
 - `@tailwind base/components/utilities` directives are removed — use `@import "tailwindcss"` only
 - Commas in arbitrary values no longer auto-convert to spaces — use underscores: `grid-cols-[1fr_auto]`
 - CSS preprocessors (Sass, Less, Stylus) are not supported in v4

 ---

 ## Getting Started

 <doc title="Installation" path="https://tailwindcss.com/docs/installation">
 # Tailwind CSS Installation

 Tailwind CSS v4.3 — scans HTML files, JavaScript components, and templates for class names, generates corresponding styles, writes them to a static CSS file. Fast, flexible, reliable, zero-runtime overhead.

 ## Installation Methods

 1. Using Vite (recommended)
 2. Using PostCSS
 3. Tailwind CLI
 4. Framework Guides
 5. Play CDN

 ## Vite Installation (Recommended)

 ### Step 1: Create Your Project
 ```bash
 npm create vite@latest my-project
 cd my-project
 ```

 ### Step 2: Install Tailwind CSS
 ```bash
 npm install tailwindcss @tailwindcss/vite
 ```

 ### Step 3: Configure the Vite Plugin
 ```typescript
 // vite.config.ts
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'

 export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
 })
 ```

 ### Step 4: Import Tailwind CSS
 Add to your main CSS file:
 ```css
 @import "tailwindcss";
 ```

 ### Step 5: Start Dev Server
 ```bash
 npm run dev
 ```

 ### Step 6: Use Tailwind in HTML
 ```html
 <!doctype html>
 <html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/style.css" rel="stylesheet">
 </head>
 <body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
 </body>
 </html>
 ```

 ## Notes
 - Your framework may handle CSS inclusion in the `<head>` automatically
 - Framework-specific guides available for Laravel, SvelteKit, React Router, Nuxt, SolidJS, and more
 </doc>

 <doc title="Editor Setup" path="https://tailwindcss.com/docs/editor-setup">
 # Tailwind CSS Editor Setup

 ## Tailwind CSS IntelliSense (VS Code)
 Official extension for Visual Studio Code.

 Features:
 - Autocomplete for utility classes, CSS functions, and directives
 - Linting to highlight errors and potential bugs
 - Hover previews showing complete CSS for each utility class
 - Syntax highlighting for custom Tailwind CSS syntax (@theme, @variant, @source)

 Installation: Search "Tailwind CSS IntelliSense" in VS Code marketplace (bradlc.vscode-tailwindcss).

 ## Prettier Plugin for Class Sorting
 Official Prettier plugin — automatically sorts classes in the recommended Tailwind order.

 ```html
 <!-- Before -->
 <button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>

 <!-- After -->
 <button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>
 ```

 Works command-line and in all editors supporting Prettier. GitHub: tailwindlabs/prettier-plugin-tailwindcss

 ## Zed Editor
 Modern editor with built-in native Tailwind support — no extension needed. Autocompletions, linting, hover previews.

 ## Cursor
 AI-native editor. Supports the VS Code IntelliSense extension and Prettier plugin.

 ## JetBrains IDEs
 WebStorm, PhpStorm — built-in intelligent Tailwind completions in HTML, no separate extension needed.

 ## Note on Custom Syntax
 Tailwind uses custom CSS syntax (@theme, @variant, @source) that may trigger warnings in strict editors. The recommended plugins handle these custom at-rules automatically.
 </doc>

 <doc title="Compatibility" path="https://tailwindcss.com/docs/compatibility">
 # Tailwind CSS v4 Compatibility

 ## Browser Support
 Minimum versions:
 - Chrome 111 (March 2023)
 - Safari 16.4 (March 2023)
 - Firefox 128 (July 2024)

 Some utilities use bleeding-edge CSS features (field-sizing: content, @starting-style, text-wrap: balance) with limited support — use only if target browsers support them.

 ## CSS Preprocessors (Sass, Less, Stylus)
 NOT RECOMMENDED. Tailwind v4 is a full-featured CSS build tool not designed to work with preprocessors. Think of Tailwind as your preprocessor. Modern browsers natively support nesting, variables, and vendor prefixes — Tailwind handles CSS bundling and import resolution automatically.

 ## CSS Modules
 AVOID. Problems:
 - Each CSS module is processed separately, Tailwind runs multiple times (slower builds)
 - Scoping is unnecessary since Tailwind's utility approach prevents conflicts
 - Modules don't have access to @theme unless explicitly imported

 If you must use CSS modules:
 ```css
 @reference "../app.css";
 button {
  @apply bg-blue-500;
 }
 ```

 Or use CSS variables directly:
 ```css
 button {
  background: var(--color-blue-500);
 }
 ```

 ## Vue, Svelte, and Astro `<style>` Blocks
 AVOID — same issues as CSS Modules. Style components with utility classes in markup instead.

 If you must use `<style>` blocks:
 ```vue
 <style scoped>
  @reference "../app.css";
  button {
    @apply bg-blue-500;
  }
 </style>
 ```

 ## What Tailwind v4 Replaces (No Preprocessor Needed)

 Build-time imports:
 ```css
 @import "tailwindcss";
 @import "./typography.css";
 ```

 Native CSS variables, nesting, color-mix(), min(), max(), round() — all handled by Lightning CSS automatically.
 </doc>

 <doc title="Upgrade Guide" path="https://tailwindcss.com/docs/upgrade-guide">
 # Tailwind CSS v3 to v4 Upgrade Guide

 ## Automated Tool
 ```bash
 npx @tailwindcss/upgrade
 ```
 Requires Node.js 20+. Run in a new branch, review the diff, test in browser. Handles ~90% of changes.

 ## Browser Requirements
 Safari 16.4+, Chrome 111+, Firefox 128+. If you need older support, stay on v3.4.

 ## Package Changes

 PostCSS:
 ```javascript
 // postcss.config.mjs
 export default {
  plugins: { "@tailwindcss/postcss": {} },
 };
 ```

 Vite:
 ```typescript
 import tailwindcss from "@tailwindcss/vite";
 export default defineConfig({ plugins: [tailwindcss()] });
 ```

 CLI: `npx @tailwindcss/cli` (replaces `npx tailwindcss`)

 ## All Breaking Changes

 ### 1. CSS Import Syntax
 ```css
 /* v3 */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

 /* v4 */
 @import "tailwindcss";
 ```

 ### 2. Removed Deprecated Utilities
 | Deprecated | Replacement |
 |---|---|
 | bg-opacity-* | bg-black/50 |
 | text-opacity-* | text-black/50 |
 | border-opacity-* | border-black/50 |
 | divide-opacity-* | divide-black/50 |
 | ring-opacity-* | ring-black/50 |
 | placeholder-opacity-* | placeholder-black/50 |
 | flex-shrink-* | shrink-* |
 | flex-grow-* | grow-* |
 | overflow-ellipsis | text-ellipsis |
 | decoration-slice | box-decoration-slice |
 | decoration-clone | box-decoration-clone |

 ### 3. Renamed Utilities
 | v3 | v4 |
 |---|---|
 | shadow-sm | shadow-xs |
 | shadow | shadow-sm |
 | drop-shadow-sm | drop-shadow-xs |
 | drop-shadow | drop-shadow-sm |
 | blur-sm | blur-xs |
 | blur | blur-sm |
 | backdrop-blur-sm | backdrop-blur-xs |
 | backdrop-blur | backdrop-blur-sm |
 | rounded-sm | rounded-xs |
 | rounded | rounded-sm |
 | outline-none | outline-hidden |
 | ring (3px) | ring-3 |

 ### 4. Ring Width Default Changed
 Default ring width: 1px (was 3px).
 ```html
 <!-- v3: ring = 3px blue ring -->
 <button class="ring ring-blue-500"></button>

 <!-- v4 equivalent -->
 <button class="ring-3 ring-blue-500"></button>
 ```

 Default ring color changed from blue-500 to currentColor.

 Restore v3 behavior:
 ```css
 @theme {
  --default-ring-width: 3px;
  --default-ring-color: var(--color-blue-500);
 }
 ```

 ### 5. Outline Changes
 `outline` now sets outline-width: 1px by default. `outline-none` renamed to `outline-hidden`.
 ```html
 <!-- v3 -->
 <input class="focus:outline-none" />
 <!-- v4 -->
 <input class="focus:outline-hidden" />
 ```

 ### 6. Border Color Default Changed
 From gray-200 to currentColor.
 ```html
 <!-- v4: must specify color explicitly -->
 <div class="border border-gray-200 px-2 py-3"></div>
 ```

 Restore v3 behavior:
 ```css
 @layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
 }
 ```

 ### 7. Space-Between Selector Changed
 ```css
 /* v3 */
 .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
 /* v4 */
 .space-y-4 > :not(:last-child) { margin-bottom: 1rem; }
 ```
 Recommendation: use flexbox + gap instead.

 ### 8. Important Modifier: Prefix → Suffix
 ```html
 <!-- v3 -->
 <div class="!flex !bg-red-500 hover:!bg-red-600">
 <!-- v4 -->
 <div class="flex! bg-red-500! hover:bg-red-600!">
 ```

 ### 9. CSS Variables in Arbitrary Values: Brackets → Parentheses
 ```html
 <!-- v3 -->
 <div class="bg-[--brand-color]"></div>
 <!-- v4 -->
 <div class="bg-(--brand-color)"></div>
 ```

 ### 10. Commas in Arbitrary Values
 No longer auto-convert to spaces. Use underscores.
 ```html
 <!-- v3 -->
 <div class="grid-cols-[max-content,auto]"></div>
 <!-- v4 -->
 <div class="grid-cols-[max-content_auto]"></div>
 ```

 ### 11. Gradient via-* Behavior
 v4 preserves gradient stops across variants (not reset). Use `via-none` to unset.

 ### 12. Variant Stacking Order: Right-to-Left → Left-to-Right
 ```html
 <!-- v3 -->
 <ul class="py-4 first:*:pt-0 last:*:pb-0">
 <!-- v4 -->
 <ul class="py-4 *:first:pt-0 *:last:pb-0">
 ```

 ### 13. Custom Utilities API
 ```css
 /* v3 */
 @layer utilities { .tab-4 { tab-size: 4; } }
 /* v4 */
 @utility tab-4 { tab-size: 4; }
 ```

 ### 14. Transform Properties
 Individual properties replace `transform` shorthand for resets and transitions.
 ```html
 <!-- v3 -->
 <button class="scale-150 focus:transform-none"></button>
 <!-- v4 -->
 <button class="scale-150 focus:scale-none"></button>
 ```

 Transitions use individual property names:
 ```html
 <!-- v4 -->
 <button class="transition-[opacity,scale] hover:scale-150"></button>
 ```

 ### 15. Hover on Mobile
 v4 `hover:` is gated with `@media (hover: hover)` — won't fire on touch-only devices.

 ### 16. Prefix Syntax
 ```html
 <!-- v4 prefixed classes look like variants -->
 <div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
 ```
 Configure: `@import "tailwindcss" prefix(tw);`

 ### 17. Preflight Changes
 - Placeholder color: gray-400 → current text color at 50% opacity
 - Button cursor: pointer → default (restore: `button:not(:disabled) { cursor: pointer; }`)
 - Dialog: default margins removed

 ### 18. Container Configuration
 `center` and `padding` options removed. Use `@utility` instead:
 ```css
 @utility container {
  margin-inline: auto;
  padding-inline: 2rem;
 }
 ```

 ### 19. theme() Function Syntax
 ```css
 /* v3 */
 @media (width >= theme(screens.xl)) {}
 /* v4 — use CSS variables */
 @media (width >= var(--breakpoint-xl)) {}
 ```

 ### 20. JavaScript Config Auto-Detection Removed
 Must use `@config` directive: `@config "../../tailwind.config.js";`
 Unsupported options in v4: corePlugins, safelist, separator.

 ### 21. resolveConfig Removed
 Use CSS variables: `getComputedStyle(document.documentElement).getPropertyValue("--shadow-xl")`

 ### 22. @apply in CSS Modules / Vue / Svelte
 Must add `@reference`:
 ```vue
 <style>
  @reference "../../app.css";
  h1 { @apply text-2xl font-bold; }
 </style>
 ```
 </doc>

 ---

 ## Core Concepts

 <doc title="Styling with Utility Classes" path="https://tailwindcss.com/docs/styling-with-utility-classes">
 # Styling with Utility Classes

 ## What Utility-First Means
 Style elements by combining many single-purpose presentational classes directly in HTML markup instead of writing custom CSS.

 ```html
 <div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
 </div>
 ```

 ## Benefits vs Custom CSS
 1. No time spent naming things or switching files
 2. CSS changes only affect the specific element
 3. CSS stops growing as features are added
 4. Copy UI chunks between projects

 ## Benefits vs Inline Styles
 - Design constraints — choose from a predefined system
 - State variants — hover, focus, etc. (impossible inline)
 - Media queries — responsive design
 - Composability — CSS variable composition

 ## Hover and Focus States
 ```html
 <button class="bg-sky-500 hover:bg-sky-700">Save changes</button>
 ```

 Stack variants:
 ```html
 <button class="bg-sky-500 disabled:hover:bg-sky-500">Save changes</button>
 ```

 ## Media Queries
 ```html
 <div class="grid grid-cols-2 sm:grid-cols-3"><!-- ... --></div>
 ```

 ## Dark Mode
 ```html
 <div class="bg-white dark:bg-gray-800">
  <h3 class="text-gray-900 dark:text-white">Title</h3>
 </div>
 ```

 ## Arbitrary Values
 ```html
 <!-- Custom color -->
 <button class="bg-[#316ff6]">Sign in with Facebook</button>
 <!-- Complex grid -->
 <div class="grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]">
 <!-- CSS calc -->
 <div class="max-h-[calc(100dvh-(--spacing(6)))]">
 <!-- Arbitrary CSS variable -->
 <div class="[--gutter-width:1rem] lg:[--gutter-width:2rem]">
 ```

 ## Class Composition via CSS Variables
 ```html
 <div class="blur-sm grayscale"><!-- filters compose via CSS vars --></div>
 ```

 ## Arbitrary CSS Properties
 ```html
 <div class="[mask-type:luminance]">
 ```

 ## Arbitrary Variants
 ```html
 <div class="[&>[data-active]+span]:text-blue-600">
 ```

 ## Group/Peer Variants
 Parent-based styling with group:
 ```html
 <a href="#" class="group rounded-lg p-8">
  <span class="group-hover:underline">Read more…</span>
 </a>
 ```

 ## Managing Duplication
 Use loops (not duplicating in template source), multi-cursor editing, or components.

 Create component classes:
 ```css
 @layer components {
  .btn-primary {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-violet-500);
    padding-inline: --spacing(5);
    padding-block: --spacing(2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-700);
      }
    }
  }
 }
 ```

 ## Conflict Resolution
 Only one conflicting class applies — whichever appears later in the stylesheet. Use conditional logic:
 ```jsx
 <div className={gridLayout ? "grid" : "flex"}>
 ```

 Force a utility with `!`:
 ```html
 <div class="bg-teal-500 bg-red-500!"><!-- bg-red-500 wins --></div>
 ```

 Mark all utilities !important:
 ```css
 @import "tailwindcss" important;
 ```

 Prefix all classes:
 ```css
 @import "tailwindcss" prefix(tw);
 ```
 </doc>

 <doc title="Hover, Focus, and Other States" path="https://tailwindcss.com/docs/hover-focus-and-other-states">
 # Hover, Focus, and Other States

 Apply utility classes conditionally using variants — a prefix that describes when the style should apply.

 ```html
 <button class="bg-sky-500 hover:bg-sky-700">Save changes</button>
 ```

 ## Pseudo-Class Variants

 ### Interactive States
 - hover — &:hover
 - focus — &:focus
 - focus-within — &:focus-within
 - focus-visible — &:focus-visible (keyboard focus)
 - active — &:active
 - visited — &:visited
 - target — &:target

 ### Structural
 - first, last, only — :first-child, :last-child, :only-child
 - odd, even — :nth-child(odd/even)
 - first-of-type, last-of-type, only-of-type
 - nth-[...] — :nth-child(...) e.g. nth-3, nth-[2n+1]
 - nth-last-[...], nth-of-type-[...], nth-last-of-type-[...]
 - empty — :empty

 ### Form States
 - disabled, enabled
 - checked, indeterminate, default
 - optional, required
 - valid, invalid
 - user-valid, user-invalid (only after user interaction)
 - in-range, out-of-range
 - placeholder-shown
 - autofill
 - read-only
 - details-content — :details-content (content of `<details>`)

 ### Advanced
 - has-[...] — :has(...) style based on descendants
 - not-[...] — :not(...)

 ## Pseudo-Element Variants
 - before — ::before
 - after — ::after
 - first-letter, first-line
 - marker — list bullets and counters
 - selection — highlighted text
 - placeholder — input placeholder
 - file — ::file-selector-button
 - backdrop — native `<dialog>` backdrop

 ## Group Variants (Parent State)
 Mark parent with `group`, target children with `group-*`:
 ```html
 <a href="#" class="group">
  <svg class="stroke-sky-500 group-hover:stroke-white"/>
  <h3 class="text-gray-900 group-hover:text-white">Title</h3>
 </a>
 ```

 Named groups for nesting: `group/item`, `group-hover/item`

 Available: group-hover, group-focus, group-active, group-odd, group-checked, group-disabled, group-aria-*, group-has-*

 ## Peer Variants (Sibling State)
 Mark sibling with `peer`, style following elements with `peer-*`:
 ```html
 <form>
  <input type="email" class="peer"/>
  <p class="invisible peer-invalid:visible">Invalid email</p>
 </form>
 ```

 Named peers: `peer/name`, `peer-checked/name`

 ## in-[...] Implicit Group Variant
 Style based on any ancestor without adding `group` class.

 ## Media & Feature Query Variants

 ### Responsive Breakpoints
 - sm — @media (width >= 40rem)
 - md — @media (width >= 48rem)
 - lg — @media (width >= 64rem)
 - xl — @media (width >= 80rem)
 - 2xl — @media (width >= 96rem)
 - min-[...] — custom min-width
 - max-sm, max-md, max-lg, max-xl, max-2xl — max-width
 - max-[...] — custom max-width

 ### Container Queries
 @3xs (16rem), @2xs, @xs, @sm, @md, @lg, @xl, @2xl through @7xl (80rem), @min-[...], @max-[...]

 ### Other Media
 - dark — prefers-color-scheme: dark
 - motion-safe — prefers-reduced-motion: no-preference
 - motion-reduce — prefers-reduced-motion: reduce
 - contrast-more — prefers-contrast: more
 - contrast-less — prefers-contrast: less
 - forced-colors — forced-colors: active
 - not-forced-colors
 - inverted-colors
 - pointer-fine, pointer-coarse, pointer-none
 - any-pointer-fine, any-pointer-coarse, any-pointer-none
 - portrait, landscape
 - noscript — scripting: none
 - print
 - supports-[...] — @supports (...)
 - not-supports-[...]
 - starting — @starting-style (initial render transitions)

 ## Attribute Variants

 ### ARIA
 - aria-busy, aria-checked, aria-disabled, aria-expanded, aria-hidden, aria-pressed, aria-readonly, aria-required, aria-selected
 - aria-[...] — arbitrary ARIA attribute
 - group-aria-*, peer-aria-*

 ### Data Attributes
 - data-[...] — &[data-...]
 ```html
 <div data-size="large" class="data-[size=large]:p-8">
 ```

 ### Directional
 - rtl — :where(:dir(rtl), [dir="rtl"] *)
 - ltr

 ### Element State
 - open — :is([open], :popover-open, :open) for `<details>` and `<dialog>`
 - inert — :is([inert], [inert] *)

 ## Child Selectors
 - * — > * (direct children)
 - ** — all descendants

 ```html
 <ul class="*:rounded-full *:bg-sky-50">
  <li>Item 1</li>
 </ul>
 ```

 ## Combining Variants
 ```html
 <button class="dark:md:hover:bg-fuchsia-600">Save</button>
 ```

 ## Arbitrary Variants
 ```html
 <li class="[&.is-dragging]:cursor-grabbing">
 <div class="[&_p]:mt-4">  <!-- space → underscore -->
 <div class="[@supports(display:grid)]:grid">
 ```
 </doc>

 <doc title="Responsive Design" path="https://tailwindcss.com/docs/responsive-design">
 # Responsive Design

 ## Default Breakpoints (Mobile-First)
 | Prefix | Min Width | CSS |
 |--------|-----------|-----|
 | sm | 40rem (640px) | @media (width >= 40rem) |
 | md | 48rem (768px) | @media (width >= 48rem) |
 | lg | 64rem (1024px) | @media (width >= 64rem) |
 | xl | 80rem (1280px) | @media (width >= 80rem) |
 | 2xl | 96rem (1536px) | @media (width >= 96rem) |

 ## Mobile-First Approach
 Unprefixed utilities apply at ALL sizes. Prefixed utilities apply at that breakpoint and ABOVE.

 ```html
 <!-- Wrong: sm: doesn't target mobile -->
 <div class="sm:text-center"></div>

 <!-- Right: unprefixed for mobile, override at larger -->
 <div class="text-center sm:text-left"></div>
 ```

 ## Breakpoint Ranges
 Stack responsive variants with max-* variants:
 ```html
 <div class="md:max-xl:flex"><!-- only between md and xl --></div>
 ```

 max-* variants:
 - max-sm — @media (width < 40rem)
 - max-md — @media (width < 48rem)
 - max-lg — @media (width < 64rem)
 - max-xl — @media (width < 80rem)
 - max-2xl — @media (width < 96rem)

 ## Arbitrary Breakpoints
 ```html
 <div class="max-[600px]:bg-sky-300 min-[320px]:text-center">
 ```

 ## Customizing Breakpoints in v4
 ```css
 @import "tailwindcss";
 @theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
 }
 ```

 Remove a breakpoint: `--breakpoint-2xl: initial;`

 Replace all:
 ```css
 @theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
 }
 ```

 Use the same unit (rem) for consistent ordering.

 ## Container Queries
 ```html
 <div class="@container">
  <div class="flex flex-col @md:flex-row">
 ```

 Max-width container queries:
 ```html
 <div class="@container">
  <div class="flex flex-row @max-md:flex-col">
 ```

 Named containers:
 ```html
 <div class="@container/main">
  <div class="flex flex-row @sm/main:flex-col">
 ```

 Custom container sizes:
 ```css
 @theme { --container-8xl: 96rem; }
 ```

 Arbitrary:
 ```html
 <div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
 ```

 Container query length units:
 ```html
 <div class="@container">
  <div class="w-[50cqw]"><!-- 50% of container width --></div>
 </div>
 ```

 For block-size units (cqb, cqh):
 ```html
 <div class="@container-size">
  <div class="h-[50cqb]">
 ```

 Default container sizes: @3xs=16rem through @7xl=80rem.
 </doc>

 <doc title="Dark Mode" path="https://tailwindcss.com/docs/dark-mode">
 # Dark Mode

 ## Basic Usage
 ```html
 <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8">
  <h3 class="text-gray-900 dark:text-white">Title</h3>
  <p class="text-gray-500 dark:text-gray-400">Description</p>
 </div>
 ```

 ## Strategy 1: System Preference (Default)
 Uses `prefers-color-scheme` media query automatically. No configuration needed.

 ## Strategy 2: Class-Based Toggle
 ```css
 /* app.css */
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 ```

 ```html
 <html class="dark">
  <body>
    <div class="bg-white dark:bg-black">...</div>
  </body>
 </html>
 ```

 ## Strategy 3: Data Attribute Toggle
 ```css
 @import "tailwindcss";
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 ```

 ```html
 <html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">...</div>
  </body>
 </html>
 ```

 ## Three-Way Toggle (System + Manual)
 Add this inline in `<head>` to avoid Flash of Unstyled Content (FOUC):
 ```javascript
 document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
 );

 // Light mode
 localStorage.theme = "light";
 // Dark mode
 localStorage.theme = "dark";
 // System preference
 localStorage.removeItem("theme");
 ```
 </doc>

 <doc title="Theme Variables" path="https://tailwindcss.com/docs/theme">
 # Theme Variables

 ## What @theme Does
 Defines design tokens that:
 1. Become CSS custom properties accessible anywhere
 2. Instruct Tailwind to generate corresponding utility classes

 ```css
 @import "tailwindcss";
 @theme {
  --color-mint-500: oklch(0.72 0.11 178);
 }
 ```

 Creates: bg-mint-500, text-mint-500, fill-mint-500, etc. AND `var(--color-mint-500)` in CSS.

 ## @theme vs :root
 Use `@theme` for design tokens that should generate utility classes.
 Use `:root` for CSS variables that don't need utility class generation.

 ## Namespace → Utility Mapping
 | Namespace | Generated Utilities |
 |-----------|---------------------|
 | --color-* | bg-*, text-*, border-*, etc. |
 | --font-* | font-sans, font-serif, etc. |
 | --text-* | text-xl, text-2xl, etc. |
 | --font-weight-* | font-bold, font-semibold |
 | --spacing-* | p-4, m-8, gap-2, etc. |
 | --radius-* | rounded-sm, rounded-lg |
 | --shadow-* | shadow-md, shadow-lg |
 | --breakpoint-* | sm:*, md:*, lg:* |
 | --container-* | @sm:*, @md:*, @lg:* |

 ## Extending the Theme
 ```css
 @import "tailwindcss";
 @theme {
  --font-script: Great Vibes, cursive;
 }
 ```
 font-script is now available alongside default font utilities.

 ## Overriding Defaults
 ```css
 @theme {
  --breakpoint-sm: 30rem; /* changes default 40rem */
 }
 ```

 ## Replacing an Entire Namespace
 ```css
 @theme {
  --color-*: initial; /* removes all default colors */
  --color-white: #fff;
  --color-purple: #3f3cbb;
 }
 ```

 ## Complete Custom Theme (No Defaults)
 ```css
 @theme {
  --*: initial; /* removes everything */
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
 }
 ```

 ## Theme Variables as CSS Custom Properties
 All @theme variables emit as :root CSS vars:
 ```css
 :root {
  --font-sans: ui-sans-serif, system-ui, ...;
  --color-red-50: oklch(0.971 0.013 17.38);
  --shadow-md: 0 4px 6px ...;
 }
 ```

 Use in custom CSS:
 ```css
 .typography {
  font-size: var(--text-base);
  color: var(--color-gray-700);
 }
 ```

 Use in arbitrary values:
 ```html
 <div class="rounded-[calc(var(--radius-xl)-1px)]">
 ```

 Use in JavaScript:
 ```javascript
 let styles = getComputedStyle(document.documentElement);
 let shadow = styles.getPropertyValue("--shadow-xl");
 ```

 ## Animation Keyframes in @theme
 ```css
 @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); }
  }
 }
 ```

 ## @theme inline
 Embeds variable value directly to avoid CSS resolution issues:
 ```css
 @theme inline {
  --font-sans: var(--font-inter);
 }
 ```

 ## @theme static
 Forces all CSS variable generation even if unused:
 ```css
 @theme static {
  --color-primary: var(--color-red-500);
 }
 ```

 ## Sharing Themes
 ```css
 /* packages/brand/theme.css */
 @theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
 }
 ```

 ```css
 /* project/app.css */
 @import "tailwindcss";
 @import "../brand/theme.css";
 ```
 </doc>

 <doc title="Colors" path="https://tailwindcss.com/docs/colors">
 # Colors

 ## Default Palette
 24 color families, each with 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950):
 red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive
 Plus: black, white

 ## OKLCH Color System
 All palette colors use OKLCH for perceptual uniformity and consistent scaling:
 ```css
 --color-blue-500: oklch(62.3% 0.214 259.815);
 --color-blue-600: oklch(54.6% 0.245 262.881);
 ```

 ## Color Utilities Generated
 bg-*, text-*, decoration-*, border-*, outline-*, shadow-*, inset-shadow-*, ring-*, inset-ring-*, accent-*, caret-*, scrollbar-thumb-*, scrollbar-track-*, fill-*, stroke-*

 ## Opacity Modifiers
 ```html
 <div class="bg-sky-500/10">   <!-- 10% opacity -->
 <div class="bg-sky-500/50">   <!-- 50% opacity -->
 <div class="bg-sky-500/100">  <!-- full opacity -->
 <div class="bg-pink-500/[71.37%]">  <!-- arbitrary -->
 <div class="bg-cyan-400/(--my-alpha-value)">  <!-- CSS var -->
 ```

 ## Customizing Colors
 Add custom colors:
 ```css
 @import "tailwindcss";
 @theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
 }
 ```

 Override defaults:
 ```css
 @theme {
  --color-gray-50: oklch(0.984 0.003 247.858);
 }
 ```

 Disable specific families:
 ```css
 @theme {
  --color-lime-*: initial;
 }
 ```

 Custom palette only:
 ```css
 @theme {
  --color-*: initial;
  --color-white: #fff;
  --color-purple: #3f3cbb;
 }
 ```

 Reference external CSS variables:
 ```css
 :root { --acme-canvas: oklch(0.967 0.003 264.542); }
 @theme inline { --color-canvas: var(--acme-canvas); }
 ```

 ## Using Colors in CSS
 ```css
 @layer components {
  .typography {
    color: var(--color-gray-950);
    a {
      color: var(--color-blue-500);
      &:hover { color: var(--color-blue-800); }
    }
  }
 }
 ```
 </doc>

 <doc title="Adding Custom Styles" path="https://tailwindcss.com/docs/adding-custom-styles">
 # Adding Custom Styles

 ## 1. Theme Tokens (@theme)
 ```css
 @theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-100: oklch(0.99 0 0);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
 }
 ```

 ## 2. Arbitrary Values
 ```html
 <div class="top-[117px]">
 <div class="bg-[#bada55] text-[22px]">
 <div class="before:content-['Festivus']">
 <div class="fill-(--my-brand-color)">  <!-- CSS var -->
 ```

 Modifiers work on arbitrary values:
 ```html
 <div class="top-[117px] lg:top-[344px]">
 ```

 ## 3. Arbitrary Properties
 ```html
 <div class="[mask-type:luminance]">
 <div class="[mask-type:luminance] hover:[mask-type:alpha]">
 <div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
 ```

 ## 4. Arbitrary Variants
 ```html
 <li class="lg:[&:nth-child(-n+3)]:hover:underline">
 ```

 ## 5. Handling Whitespace
 ```html
 <div class="grid-cols-[1fr_500px_2fr]">  <!-- underscore = space -->
 <div class="bg-[url('/what_a_rush.png')]">  <!-- URLs: underscore preserved -->
 <div class="before:content-['hello\_world']">  <!-- escape to force underscore -->
 ```

 ## 6. CSS Data Type Hints (Disambiguation)
 ```html
 <div class="text-(length:--my-var)">  <!-- font-size interpretation -->
 <div class="text-(color:--my-var)">   <!-- color interpretation -->
 ```

 ## 7. @layer base (Element Defaults)
 ```css
 @layer base {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
 }
 ```

 ## 8. @layer components (Reusable Classes)
 ```css
 @layer components {
  .card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: --spacing(6);
    box-shadow: var(--shadow-xl);
  }
 }
 ```
 Usage: `<div class="card rounded-none">` — utility overrides component.

 ## 9. @variant (Apply Variants in Custom CSS)
 ```css
 .my-element {
  background: white;
  @variant dark { background: black; }
 }
 ```

 Multiple variants:
 ```css
 .my-element {
  @variant hover:focus { background: black; }
 }
 ```

 Comma-separated:
 ```css
 .my-element {
  @variant hover, focus { background: black; }
 }
 ```

 ## 10. @utility (Custom Utilities)
 Simple:
 ```css
 @utility content-auto { content-visibility: auto; }
 ```

 With nesting:
 ```css
 @utility scrollbar-hidden {
  &::-webkit-scrollbar { display: none; }
 }
 ```

 Functional with theme values:
 ```css
 @theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
 }
 @utility tab-* {
  tab-size: --value(--tab-size-*);
 }
 ```

 Bare integer values:
 ```css
 @utility tab-* { tab-size: --value(integer); }
 ```

 Available types: number, integer, ratio, percentage, length, color, angle, url, image, *

 Arbitrary values:
 ```css
 @utility tab-* { tab-size: --value([integer]); }
 ```

 Combined (theme + bare + arbitrary):
 ```css
 @utility tab-* {
  tab-size: --value([integer]);
  tab-size: --value(integer);
  tab-size: --value(--tab-size-*);
 }
 ```

 Default values:
 ```css
 @utility tab-* { tab-size: --value(integer, --default(4)); }
 ```

 Negative utilities:
 ```css
 @utility -inset-* {
  inset: --spacing(--value(integer) * -1);
  inset: calc(--value([percentage], [length]) * -1);
 }
 ```

 Modifiers (e.g., line-height on text-*):
 ```css
 @utility text-* {
  font-size: --value(--text-*, [length]);
  line-height: --modifier(--leading-*, [length], [*]);
 }
 ```

 Fractions:
 ```css
 @utility aspect-* {
  aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);
 }
 ```

 ## 11. @custom-variant
 ```css
 @custom-variant theme-midnight (&:where([data-theme="midnight"] *));
 ```

 Usage: `theme-midnight:bg-black`

 Multiple rules (longhand):
 ```css
 @custom-variant any-hover {
  @media (any-hover: hover) {
    &:hover { @slot; }
  }
 }
 ```
 </doc>

 <doc title="Detecting Classes in Source Files" path="https://tailwindcss.com/docs/detecting-classes-in-source-files">
 # Detecting Classes in Source Files

 ## How Tailwind Scans
 Tailwind scans project files as plain text and looks for tokens matching class name patterns. It has NO understanding of string concatenation or interpolation — only complete class names statically present in code are detected.

 ## Dynamic Classes Gotcha
 ```html
 <!-- WRONG: Tailwind can't parse this -->
 <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
 ```

 ```jsx
 // WRONG: interpolated property name
 function Button({ color }) {
  return <button className={`bg-${color}-600`}>{children}</button>;
 }
 ```

 ```html
 <!-- RIGHT: complete class names -->
 <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
 ```

 ```jsx
 // RIGHT: map to complete class names
 const colorVariants = {
  blue: "bg-blue-600 hover:bg-blue-500",
  red: "bg-red-600 hover:bg-red-500",
 };
 return <button className={colorVariants[color]}>
 ```

 ## Default Scanning
 Scans all files EXCEPT:
 - Files in .gitignore
 - node_modules
 - Binary files (images, videos, archives)
 - CSS files
 - Package manager lock files

 ## @source Directive

 Add external paths (e.g., npm packages built with Tailwind):
 ```css
 @import "tailwindcss";
 @source "../node_modules/@acmecorp/ui-lib";
 ```

 Set base path for monorepos:
 ```css
 @import "tailwindcss" source("../src");
 ```

 Exclude specific paths:
 ```css
 @import "tailwindcss";
 @source not "../src/components/legacy";
 ```

 Disable auto-detection, use explicit sources only:
 ```css
 @import "tailwindcss" source(none);
 @source "../admin";
 @source "../shared";
 ```

 ## Safelisting with @source inline()
 Force generation of specific classes not in source:
 ```css
 @import "tailwindcss";
 @source inline("underline");
 ```

 With variants:
 ```css
 @source inline("{hover:,focus:,}underline");
 ```

 With brace expansion (ranges):
 ```css
 @source inline("{hover:,}bg-red-{50,{100..900..100},950}");
 ```
 Generates hover:bg-red-50, bg-red-50, hover:bg-red-100, bg-red-100, ..., bg-red-950.

 ## Excluding with @source not inline()
 ```css
 @source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");
 ```
 </doc>

 <doc title="Functions and Directives" path="https://tailwindcss.com/docs/functions-and-directives">
 # Functions and Directives

 ## Directives

 ### @import
 Inline CSS files including Tailwind itself:
 ```css
 @import "tailwindcss";
 ```

 ### @theme
 Define design tokens:
 ```css
 @theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-100: oklch(0.99 0 0);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
 }
 ```

 ### @source
 Specify source files for class detection:
 ```css
 @source "../node_modules/@my-company/ui-lib";
 ```

 ### @utility
 Add custom utilities that work with variants:
 ```css
 @utility tab-4 {
  tab-size: 4;
 }
 ```
 Usage: `tab-4`, `hover:tab-4`, `lg:tab-4`

 ### @variant
 Apply a Tailwind variant to styles in custom CSS:
 ```css
 .my-element {
  background: white;
  @variant dark { background: black; }
 }
 ```

 ### @custom-variant
 Create a new variant:
 ```css
 @custom-variant theme-midnight (&:where([data-theme="midnight"] *));
 ```
 Usage: `theme-midnight:bg-black`

 ### @apply
 Inline existing utilities into custom CSS:
 ```css
 .select2-dropdown {
  @apply rounded-b-lg shadow-md;
 }
 ```

 ### @reference
 Import theme/utilities for @apply in components without duplicating CSS output:
 ```vue
 <style>
  @reference "../../app.css";
  h1 { @apply text-2xl font-bold text-red-500; }
 </style>
 ```

 With default theme:
 ```vue
 <style>
  @reference "tailwindcss";
  h1 { @apply text-2xl font-bold; }
 </style>
 ```

 Supports subpath imports (package.json "imports" field):
 ```css
 @reference "#app.css";
 ```

 ## Functions

 ### --alpha()
 Adjust color opacity:
 ```css
 /* Input */
 .my-element { color: --alpha(var(--color-lime-300) / 50%); }
 /* Output */
 .my-element { color: color-mix(in oklab, var(--color-lime-300) 50%, transparent); }
 ```

 ### --spacing()
 Generate spacing values from theme scale:
 ```css
 /* Input */
 .my-element { margin: --spacing(4); }
 /* Output */
 .my-element { margin: calc(var(--spacing) * 4); }
 ```

 In arbitrary values:
 ```html
 <div class="py-[calc(--spacing(4)-1px)]">
 ```

 ## v3 Compatibility Directives

 ### @config
 Load legacy JavaScript config:
 ```css
 @config "../../tailwind.config.js";
 ```
 Note: corePlugins, safelist, separator are NOT supported in v4.

 ### @plugin
 Load legacy JavaScript plugin:
 ```css
 @plugin "@tailwindcss/typography";
 ```

 ### theme() (deprecated)
 Use CSS variables instead. Still works for compatibility:
 ```css
 .my-element { margin: theme(spacing.12); }
 /* Prefer: */
 .my-element { margin: var(--spacing-12); }
 ```
 </doc>

 ---

 ## Base Styles

 <doc title="Preflight" path="https://tailwindcss.com/docs/preflight">
 # Preflight

 Opinionated base styles built on modern-normalize. Automatically injected into the `base` layer when you import Tailwind CSS.

 ## What Preflight Resets

 ### 1. Margins and Padding Removed
 ```css
 *, ::after, ::before, ::backdrop, ::file-selector-button {
  margin: 0;
  padding: 0;
 }
 ```
 Why: prevents accidental reliance on user-agent margins not in your design system.

 ### 2. Border Styles Reset
 ```css
 *, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box;
  border: 0 solid;
 }
 ```
 Why: adding `border` class only needs to set border-width.

 ### 3. Headings Unstyled
 ```css
 h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
 }
 ```
 Why: browser defaults don't match Tailwind's type scale; encourages deliberate heading styling.

 ### 4. Lists Unstyled
 ```css
 ol, ul, menu { list-style: none; }
 ```
 Accessibility note: add `role="list"` if content is semantically a list (VoiceOver workaround).

 ### 5. Images Block-Level
 ```css
 img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
 }
 ```
 Why: avoids unexpected alignment gaps from `display: inline` default.

 ### 6. Images Constrained
 ```css
 img, video { max-width: 100%; height: auto; }
 ```
 Makes images responsive by default.

 ### 7. Hidden Attribute Respected
 ```css
 [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
 ```

 ## Extending Preflight
 ```css
 @layer base {
  h1 { font-size: var(--text-2xl); }
  a { color: var(--color-blue-600); text-decoration-line: underline; }
 }
 ```

 ## Disabling Preflight
 ```css
 /* Default @import "tailwindcss" expands to: */
 @layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(base);
 @import "tailwindcss/utilities.css" layer(utilities);

 /* To disable, omit the preflight line: */
 @layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 ```

 ## Third-Party Library Conflicts
 ```css
 @layer base {
  .google-map * { border-style: none; }
 }
 ```
 </doc>

 ---

 ## Utility Reference — Layout

 The following utility reference pages each cover a specific CSS property. Full content available at the linked URL.

 - [aspect-ratio](https://tailwindcss.com/docs/aspect-ratio): aspect-square (1/1), aspect-video (16/9), aspect-auto, arbitrary aspect-[4/3]
 - [columns](https://tailwindcss.com/docs/columns): columns-1 through columns-12 (count), columns-xs through columns-7xl (width)
 - [break-after](https://tailwindcss.com/docs/break-after): break-after-auto, break-after-avoid, break-after-all, break-after-avoid-page, break-after-page, break-after-left, break-after-right, break-after-column
 - [break-before](https://tailwindcss.com/docs/break-before): Same values as break-after applied before element
 - [break-inside](https://tailwindcss.com/docs/break-inside): break-inside-auto, break-inside-avoid, break-inside-avoid-page, break-inside-avoid-column
 - [box-decoration-break](https://tailwindcss.com/docs/box-decoration-break): box-decoration-slice (default), box-decoration-clone
 - [box-sizing](https://tailwindcss.com/docs/box-sizing): box-border (border-box), box-content (content-box)
 - [display](https://tailwindcss.com/docs/display): block, inline-block, inline, flex, inline-flex, table, inline-table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, list-item, hidden
 - [float](https://tailwindcss.com/docs/float): float-right, float-left, float-start, float-end, float-none
 - [clear](https://tailwindcss.com/docs/clear): clear-left, clear-right, clear-both, clear-start, clear-end, clear-none
 - [isolation](https://tailwindcss.com/docs/isolation): isolate, isolation-auto
 - [object-fit](https://tailwindcss.com/docs/object-fit): object-contain, object-cover, object-fill, object-none, object-scale-down
 - [object-position](https://tailwindcss.com/docs/object-position): object-center, object-top, object-right, object-bottom, object-left, object-right-top, object-right-bottom, object-left-top, object-left-bottom, arbitrary
 - [overflow](https://tailwindcss.com/docs/overflow): overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll; overflow-x-*, overflow-y-*
 - [overscroll-behavior](https://tailwindcss.com/docs/overscroll-behavior): overscroll-auto, overscroll-contain, overscroll-none; overscroll-x-*, overscroll-y-*
 - [position](https://tailwindcss.com/docs/position): static, fixed, absolute, relative, sticky
 - [top / right / bottom / left](https://tailwindcss.com/docs/top-right-bottom-left): inset-*, inset-x-*, inset-y-*, top-*, right-*, bottom-*, left-*, start-*, end-* using spacing scale + auto/full/1/2/px/fractions; negative values with -inset-*
 - [visibility](https://tailwindcss.com/docs/visibility): visible, invisible, collapse
 - [z-index](https://tailwindcss.com/docs/z-index): z-0, z-10, z-20, z-30, z-40, z-50, z-auto, arbitrary; negative -z-*

 ## Utility Reference — Flexbox & Grid

 - [flex-basis](https://tailwindcss.com/docs/flex-basis): basis-0 through basis-96 (spacing scale), basis-1/2, basis-1/3, basis-2/3, basis-1/4, basis-full, basis-auto, basis-px, arbitrary
 - [flex-direction](https://tailwindcss.com/docs/flex-direction): flex-row, flex-row-reverse, flex-col, flex-col-reverse
 - [flex-wrap](https://tailwindcss.com/docs/flex-wrap): flex-wrap, flex-wrap-reverse, flex-nowrap
 - [flex](https://tailwindcss.com/docs/flex): flex-1 (1 1 0%), flex-auto (1 1 auto), flex-none (0 0 auto), flex-initial (0 1 auto), arbitrary
 - [flex-grow](https://tailwindcss.com/docs/flex-grow): grow (1), grow-0 (0), arbitrary
 - [flex-shrink](https://tailwindcss.com/docs/flex-shrink): shrink (1), shrink-0 (0), arbitrary
 - [order](https://tailwindcss.com/docs/order): order-first (-9999), order-last (9999), order-none (0), order-1 through order-12, arbitrary
 - [grid-template-columns](https://tailwindcss.com/docs/grid-template-columns): grid-cols-1 through grid-cols-12, grid-cols-none, grid-cols-subgrid, arbitrary
 - [grid-column](https://tailwindcss.com/docs/grid-column): col-auto, col-span-1 through col-span-12, col-span-full, col-start-1 through col-start-13, col-end-1 through col-end-13, arbitrary
 - [grid-template-rows](https://tailwindcss.com/docs/grid-template-rows): grid-rows-1 through grid-rows-12, grid-rows-none, grid-rows-subgrid, arbitrary
 - [grid-row](https://tailwindcss.com/docs/grid-row): row-auto, row-span-1 through row-span-12, row-span-full, row-start-1 through row-start-13, row-end-1 through row-end-13
 - [grid-auto-flow](https://tailwindcss.com/docs/grid-auto-flow): grid-flow-row, grid-flow-col, grid-flow-dense, grid-flow-row-dense, grid-flow-col-dense
 - [grid-auto-columns](https://tailwindcss.com/docs/grid-auto-columns): auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr, arbitrary
 - [grid-auto-rows](https://tailwindcss.com/docs/grid-auto-rows): auto-rows-auto, auto-rows-min, auto-rows-max, auto-rows-fr, arbitrary
 - [gap](https://tailwindcss.com/docs/gap): gap-0 through gap-96 (spacing scale); gap-x-*, gap-y-*; arbitrary
 - [justify-content](https://tailwindcss.com/docs/justify-content): justify-normal, justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly, justify-stretch, justify-baseline
 - [justify-items](https://tailwindcss.com/docs/justify-items): justify-items-normal, justify-items-start, justify-items-end, justify-items-center, justify-items-stretch, justify-items-baseline
 - [justify-self](https://tailwindcss.com/docs/justify-self): justify-self-auto, justify-self-start, justify-self-end, justify-self-center, justify-self-stretch, justify-self-baseline
 - [align-content](https://tailwindcss.com/docs/align-content): content-normal, content-center, content-start, content-end, content-between, content-around, content-evenly, content-stretch, content-baseline
 - [align-items](https://tailwindcss.com/docs/align-items): items-start, items-end, items-center, items-baseline, items-stretch
 - [align-self](https://tailwindcss.com/docs/align-self): self-auto, self-start, self-end, self-center, self-stretch, self-baseline
 - [place-content](https://tailwindcss.com/docs/place-content): place-content-center, place-content-start, place-content-end, place-content-between, place-content-around, place-content-evenly, place-content-baseline, place-content-stretch
 - [place-items](https://tailwindcss.com/docs/place-items): place-items-start, place-items-end, place-items-center, place-items-baseline, place-items-stretch
 - [place-self](https://tailwindcss.com/docs/place-self): place-self-auto, place-self-start, place-self-end, place-self-center, place-self-stretch

 ## Utility Reference — Spacing

 - [padding](https://tailwindcss.com/docs/padding): p-0 through p-96; px-*, py-*, pt-*, pr-*, pb-*, pl-*, ps-*, pe-* (logical); 1 unit = 0.25rem; arbitrary; p-px
 - [margin](https://tailwindcss.com/docs/margin): m-0 through m-96; mx-*, my-*, mt-*, mr-*, mb-*, ml-*, ms-*, me-*; negative -m-*; mx-auto, my-auto for centering; arbitrary

 ## Utility Reference — Sizing

 - [width](https://tailwindcss.com/docs/width): w-0 through w-96 (spacing), w-px, w-1/2, w-1/3, w-2/3, w-1/4, w-3/4, w-1/5 through w-4/5, w-1/6, w-5/6, w-full, w-screen, w-svw, w-dvw, w-lvw, w-min, w-max, w-fit, w-auto, arbitrary
 - [min-width](https://tailwindcss.com/docs/min-width): min-w-0, min-w-px, min-w-full, min-w-min, min-w-max, min-w-fit, min-w-screen, arbitrary
 - [max-width](https://tailwindcss.com/docs/max-width): max-w-none, max-w-xs through max-w-7xl, max-w-full, max-w-min, max-w-max, max-w-fit, max-w-prose (65ch), max-w-screen-sm through max-w-screen-2xl, arbitrary
 - [height](https://tailwindcss.com/docs/height): h-0 through h-96, h-px, h-1/2, h-1/3, h-2/3, h-1/4, h-3/4, h-full, h-screen, h-svh, h-dvh, h-lvh, h-min, h-max, h-fit, h-auto, arbitrary
 - [min-height](https://tailwindcss.com/docs/min-height): min-h-0, min-h-px, min-h-full, min-h-screen, min-h-svh, min-h-dvh, min-h-lvh, min-h-min, min-h-max, min-h-fit, arbitrary
 - [max-height](https://tailwindcss.com/docs/max-height): max-h-0 through max-h-96, max-h-px, max-h-none, max-h-full, max-h-screen, max-h-svh, max-h-dvh, max-h-lvh, max-h-min, max-h-max, max-h-fit, arbitrary
 - [inline-size](https://tailwindcss.com/docs/inline-size): Same values as width using is-* prefix
 - [min-inline-size](https://tailwindcss.com/docs/min-inline-size): Same values as min-width using min-is-* prefix
 - [max-inline-size](https://tailwindcss.com/docs/max-inline-size): Same values as max-width using max-is-* prefix
 - [block-size](https://tailwindcss.com/docs/block-size): Same values as height using bs-* prefix
 - [min-block-size](https://tailwindcss.com/docs/min-block-size): Same values as min-height using min-bs-* prefix
 - [max-block-size](https://tailwindcss.com/docs/max-block-size): Same values as max-height using max-bs-* prefix

 ## Utility Reference — Typography

 - [font-family](https://tailwindcss.com/docs/font-family): font-sans, font-serif, font-mono; custom via --font-* in @theme
 - [font-size](https://tailwindcss.com/docs/font-size): text-xs (0.75rem/1rem), text-sm (0.875rem/1.25rem), text-base (1rem/1.5rem), text-lg (1.125rem/1.75rem), text-xl (1.25rem/1.75rem), text-2xl (1.5rem/2rem), text-3xl (1.875rem/2.25rem), text-4xl (2.25rem/2.5rem), text-5xl (3rem/1), text-6xl (3.75rem/1), text-7xl (4.5rem/1), text-8xl (6rem/1), text-9xl (8rem/1), arbitrary
 - [font-smoothing](https://tailwindcss.com/docs/font-smoothing): antialiased (-webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale), subpixel-antialiased (auto)
 - [font-style](https://tailwindcss.com/docs/font-style): italic, not-italic
 - [font-weight](https://tailwindcss.com/docs/font-weight): font-thin (100), font-extralight (200), font-light (300), font-normal (400), font-medium (500), font-semibold (600), font-bold (700), font-extrabold (800), font-black (900), arbitrary
 - [font-stretch](https://tailwindcss.com/docs/font-stretch): font-stretch-ultra-condensed through font-stretch-ultra-expanded, font-stretch-normal, arbitrary percentage
 - [font-variant-numeric](https://tailwindcss.com/docs/font-variant-numeric): normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions
 - [font-feature-settings](https://tailwindcss.com/docs/font-feature-settings): Arbitrary values only
 - [letter-spacing](https://tailwindcss.com/docs/letter-spacing): tracking-tighter (-0.05em), tracking-tight (-0.025em), tracking-normal (0), tracking-wide (0.025em), tracking-wider (0.05em), tracking-widest (0.1em), arbitrary
 - [line-clamp](https://tailwindcss.com/docs/line-clamp): line-clamp-1 through line-clamp-6, line-clamp-none, arbitrary
 - [line-height](https://tailwindcss.com/docs/line-height): leading-none (1), leading-tight (1.25), leading-snug (1.375), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2), leading-3 through leading-10, arbitrary
 - [list-style-image](https://tailwindcss.com/docs/list-style-image): list-image-none, arbitrary URL
 - [list-style-position](https://tailwindcss.com/docs/list-style-position): list-inside, list-outside
 - [list-style-type](https://tailwindcss.com/docs/list-style-type): list-none, list-disc, list-decimal, arbitrary
 - [text-align](https://tailwindcss.com/docs/text-align): text-left, text-center, text-right, text-justify, text-start, text-end
 - [color](https://tailwindcss.com/docs/color): text-{color}-{shade} using full palette; text-current, text-transparent, text-black, text-white; opacity modifier /
 - [text-decoration-line](https://tailwindcss.com/docs/text-decoration-line): underline, overline, line-through, no-underline
 - [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color): decoration-{color}-{shade}; decoration-current, decoration-transparent
 - [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style): decoration-solid, decoration-double, decoration-dotted, decoration-dashed, decoration-wavy
 - [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness): decoration-auto, decoration-from-font, decoration-0, decoration-1, decoration-2, decoration-4, decoration-8, arbitrary
 - [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset): underline-offset-auto, underline-offset-0, underline-offset-1, underline-offset-2, underline-offset-4, underline-offset-8, arbitrary
 - [text-transform](https://tailwindcss.com/docs/text-transform): uppercase, lowercase, capitalize, normal-case
 - [text-overflow](https://tailwindcss.com/docs/text-overflow): truncate (overflow-hidden text-ellipsis whitespace-nowrap), text-ellipsis, text-clip
 - [text-wrap](https://tailwindcss.com/docs/text-wrap): text-wrap, text-nowrap, text-balance (even line lengths), text-pretty (no orphans)
 - [text-indent](https://tailwindcss.com/docs/text-indent): indent-0 through indent-96 (spacing scale); negative -indent-*; arbitrary
 - [tab-size](https://tailwindcss.com/docs/tab-size): tab-0, tab-2, tab-4, tab-8, arbitrary
 - [vertical-align](https://tailwindcss.com/docs/vertical-align): align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super, arbitrary
 - [white-space](https://tailwindcss.com/docs/white-space): whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap, whitespace-break-spaces
 - [word-break](https://tailwindcss.com/docs/word-break): break-normal, break-all, break-keep
 - [overflow-wrap](https://tailwindcss.com/docs/overflow-wrap): wrap-normal, wrap-break-word, wrap-anywhere
 - [hyphens](https://tailwindcss.com/docs/hyphens): hyphens-none, hyphens-manual, hyphens-auto
 - [content](https://tailwindcss.com/docs/content): content-none, arbitrary (e.g. content-['Festivus'], content-[attr(data-label)])

 ## Utility Reference — Backgrounds

 - [background-attachment](https://tailwindcss.com/docs/background-attachment): bg-fixed, bg-local, bg-scroll
 - [background-clip](https://tailwindcss.com/docs/background-clip): bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text
 - [background-color](https://tailwindcss.com/docs/background-color): bg-{color}-{shade}, bg-current, bg-transparent, bg-black, bg-white; opacity modifier /
 - [background-image](https://tailwindcss.com/docs/background-image): bg-none; bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, bg-linear-to-tl; from-*, via-*, to-* with palette or arbitrary; bg-radial-*, bg-conic-*; arbitrary URL
 - [background-origin](https://tailwindcss.com/docs/background-origin): bg-origin-border, bg-origin-padding, bg-origin-content
 - [background-position](https://tailwindcss.com/docs/background-position): bg-center, bg-top, bg-right, bg-bottom, bg-left, bg-right-top, bg-right-bottom, bg-left-top, bg-left-bottom, arbitrary
 - [background-repeat](https://tailwindcss.com/docs/background-repeat): bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space
 - [background-size](https://tailwindcss.com/docs/background-size): bg-auto, bg-cover, bg-contain, arbitrary

 ## Utility Reference — Borders

 - [border-radius](https://tailwindcss.com/docs/border-radius): rounded-none, rounded-xs, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full; per-side: rounded-t-*, rounded-r-*, rounded-b-*, rounded-l-*; per-corner: rounded-tl-*, rounded-tr-*, rounded-br-*, rounded-bl-*; logical: rounded-s-*, rounded-e-*, rounded-ss-*, rounded-se-*, rounded-ee-*, rounded-es-*; arbitrary
 - [border-width](https://tailwindcss.com/docs/border-width): border-0, border, border-2, border-4, border-8; border-x-*, border-y-*; border-t-*, border-r-*, border-b-*, border-l-*, border-s-*, border-e-*; arbitrary
 - [border-color](https://tailwindcss.com/docs/border-color): border-{color}-{shade}, border-current, border-transparent; border-x-*, border-y-*, border-t-*, border-r-*, border-b-*, border-l-*; opacity modifier; default is currentColor in v4
 - [border-style](https://tailwindcss.com/docs/border-style): border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none
 - [outline-width](https://tailwindcss.com/docs/outline-width): outline-0, outline-1, outline-2, outline-4, outline-8, arbitrary
 - [outline-color](https://tailwindcss.com/docs/outline-color): outline-{color}-{shade}, outline-current, outline-transparent; opacity modifier
 - [outline-style](https://tailwindcss.com/docs/outline-style): outline (1px solid), outline-dashed, outline-dotted, outline-double, outline-none (display: none), outline-hidden (visually hidden, accessible); note: `outline-hidden` is v4's replacement for v3's `outline-none`
 - [outline-offset](https://tailwindcss.com/docs/outline-offset): outline-offset-0, outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-8, arbitrary

 ## Utility Reference — Effects

 - [box-shadow](https://tailwindcss.com/docs/box-shadow): shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-none; inset-shadow-xs through inset-shadow-2xl; shadow-{color}-{shade} for color; note: v4 scale is one step smaller than v3 names
 - [text-shadow](https://tailwindcss.com/docs/text-shadow): text-shadow-xs, text-shadow-sm, text-shadow-md, text-shadow-lg, text-shadow-none, arbitrary
 - [opacity](https://tailwindcss.com/docs/opacity): opacity-0, opacity-5, opacity-10, opacity-15, opacity-20, opacity-25, opacity-30, opacity-35, opacity-40, opacity-45, opacity-50, opacity-55, opacity-60, opacity-65, opacity-70, opacity-75, opacity-80, opacity-85, opacity-90, opacity-95, opacity-100, opacity-1, opacity-2, opacity-3, arbitrary
 - [mix-blend-mode](https://tailwindcss.com/docs/mix-blend-mode): mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity, mix-blend-plus-lighter
 - [background-blend-mode](https://tailwindcss.com/docs/background-blend-mode): bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten, bg-blend-color-dodge, bg-blend-color-burn, bg-blend-hard-light, bg-blend-soft-light, bg-blend-difference, bg-blend-exclusion, bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity
 - [mask-clip](https://tailwindcss.com/docs/mask-clip): mask-clip-border, mask-clip-padding, mask-clip-content, mask-clip-fill, mask-clip-stroke, mask-clip-view, mask-clip-no-clip
 - [mask-composite](https://tailwindcss.com/docs/mask-composite): mask-composite-add, mask-composite-subtract, mask-composite-intersect, mask-composite-exclude
 - [mask-image](https://tailwindcss.com/docs/mask-image): mask-none, arbitrary gradient/URL
 - [mask-mode](https://tailwindcss.com/docs/mask-mode): mask-alpha, mask-luminance, mask-match
 - [mask-origin](https://tailwindcss.com/docs/mask-origin): mask-origin-border, mask-origin-padding, mask-origin-content, mask-origin-fill, mask-origin-stroke, mask-origin-view
 - [mask-position](https://tailwindcss.com/docs/mask-position): mask-center, mask-top, mask-right, mask-bottom, mask-left, and corners; arbitrary
 - [mask-repeat](https://tailwindcss.com/docs/mask-repeat): mask-repeat, mask-no-repeat, mask-repeat-x, mask-repeat-y, mask-repeat-round, mask-repeat-space
 - [mask-size](https://tailwindcss.com/docs/mask-size): mask-auto, mask-cover, mask-contain, arbitrary
 - [mask-type](https://tailwindcss.com/docs/mask-type): mask-type-alpha, mask-type-luminance

 ## Utility Reference — Filters

 - [filter](https://tailwindcss.com/docs/filter): blur-xs, blur-sm, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl, blur-none; brightness-0, brightness-50, brightness-75, brightness-90, brightness-95, brightness-100, brightness-105, brightness-110, brightness-125, brightness-150, brightness-200; contrast-0, contrast-25, contrast-50, contrast-75, contrast-100, contrast-125, contrast-150, contrast-200; drop-shadow-xs through drop-shadow-2xl, drop-shadow-none; grayscale, grayscale-0; hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180; invert, invert-0; saturate-0, saturate-50, saturate-100, saturate-150, saturate-200; sepia, sepia-0; arbitrary values for all
 - [backdrop-filter](https://tailwindcss.com/docs/backdrop-filter): backdrop-blur-xs through backdrop-blur-3xl, backdrop-blur-none; backdrop-brightness-*, backdrop-contrast-*, backdrop-grayscale, backdrop-hue-rotate-*, backdrop-invert, backdrop-opacity-*, backdrop-saturate-*, backdrop-sepia; arbitrary

 ## Utility Reference — Tables

 - [border-collapse](https://tailwindcss.com/docs/border-collapse): border-collapse, border-separate
 - [border-spacing](https://tailwindcss.com/docs/border-spacing): border-spacing-0 through border-spacing-96; border-spacing-x-*, border-spacing-y-*; arbitrary
 - [table-layout](https://tailwindcss.com/docs/table-layout): table-auto, table-fixed
 - [caption-side](https://tailwindcss.com/docs/caption-side): caption-top, caption-bottom

 ## Utility Reference — Transitions & Animation

 - [transition-property](https://tailwindcss.com/docs/transition-property): transition (opacity, color, background-color, border-color, text-decoration-color, fill, stroke, --tw-shadow, --tw-ring-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter), transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform, transition-none; in v4 use individual property names in arbitrary (e.g. transition-[opacity,scale] not transition-[opacity,transform])
 - [transition-behavior](https://tailwindcss.com/docs/transition-behavior): transition-normal, transition-allow-discrete (enables transitioning display:none, visibility, overlay)
 - [transition-duration](https://tailwindcss.com/docs/transition-duration): duration-0, duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000, arbitrary
 - [transition-timing-function](https://tailwindcss.com/docs/transition-timing-function): ease-linear, ease-in, ease-out, ease-in-out, ease-initial, ease-none, arbitrary cubic-bezier/steps
 - [transition-delay](https://tailwindcss.com/docs/transition-delay): delay-0, delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, delay-700, delay-1000, arbitrary
 - [animation](https://tailwindcss.com/docs/animation): animate-none, animate-spin (linear 1s infinite), animate-ping (ease-in-out 1s infinite), animate-pulse (ease-in-out 2s infinite), animate-bounce (1s infinite); custom via --animate-* in @theme with @keyframes

 ## Utility Reference — Transforms

 - [backface-visibility](https://tailwindcss.com/docs/backface-visibility): backface-visible, backface-hidden
 - [perspective](https://tailwindcss.com/docs/perspective): perspective-none, perspective-dramatic, perspective-near, perspective-normal, perspective-midrange, perspective-distant; arbitrary
 - [perspective-origin](https://tailwindcss.com/docs/perspective-origin): perspective-origin-center, perspective-origin-top, perspective-origin-right, perspective-origin-bottom, perspective-origin-left, perspective-origin-top-left, perspective-origin-top-right, perspective-origin-bottom-left, perspective-origin-bottom-right; arbitrary
 - [rotate](https://tailwindcss.com/docs/rotate): rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90, rotate-180; rotate-x-*, rotate-y-*, rotate-z-*; negative; arbitrary
 - [scale](https://tailwindcss.com/docs/scale): scale-0, scale-25, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150; scale-x-*, scale-y-*; scale-none; negative; arbitrary
 - [skew](https://tailwindcss.com/docs/skew): skew-0, skew-1, skew-2, skew-3, skew-6, skew-12; skew-x-*, skew-y-*; negative; arbitrary
 - [transform](https://tailwindcss.com/docs/transform): transform-none (resets all transforms), transform-gpu (GPU compositing), transform-flat (transform-style: flat), transform-3d (transform-style: preserve-3d)
 - [transform-origin](https://tailwindcss.com/docs/transform-origin): origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left; arbitrary
 - [transform-style](https://tailwindcss.com/docs/transform-style): transform-flat, transform-3d
 - [translate](https://tailwindcss.com/docs/translate): translate-x-0 through translate-x-96 (spacing scale), fractions, full, px; translate-y-*; translate-z-* (for 3D); negative; arbitrary
 - [zoom](https://tailwindcss.com/docs/zoom): zoom-0, zoom-50, zoom-75, zoom-90, zoom-95, zoom-100, zoom-105, zoom-110, zoom-125, zoom-150; arbitrary

 ## Utility Reference — Interactivity

 - [accent-color](https://tailwindcss.com/docs/accent-color): accent-auto, accent-{color}-{shade}
 - [appearance](https://tailwindcss.com/docs/appearance): appearance-none (remove browser chrome), appearance-auto (restore)
 - [caret-color](https://tailwindcss.com/docs/caret-color): caret-auto, caret-current, caret-transparent, caret-{color}-{shade}
 - [color-scheme](https://tailwindcss.com/docs/color-scheme): scheme-normal, scheme-light, scheme-dark, scheme-light-dark, scheme-only-light, scheme-only-dark
 - [cursor](https://tailwindcss.com/docs/cursor): cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-help, cursor-not-allowed, cursor-none, cursor-context-menu, cursor-progress, cursor-cell, cursor-crosshair, cursor-vertical-text, cursor-alias, cursor-copy, cursor-no-drop, cursor-grab, cursor-grabbing, cursor-all-scroll, cursor-col-resize, cursor-row-resize, cursor-n-resize, cursor-e-resize, cursor-s-resize, cursor-w-resize, cursor-ne-resize, cursor-nw-resize, cursor-se-resize, cursor-sw-resize, cursor-ew-resize, cursor-ns-resize, cursor-nesw-resize, cursor-nwse-resize, cursor-zoom-in, cursor-zoom-out; arbitrary
 - [field-sizing](https://tailwindcss.com/docs/field-sizing): field-sizing-fixed, field-sizing-content (auto-resize textarea)
 - [pointer-events](https://tailwindcss.com/docs/pointer-events): pointer-events-none, pointer-events-auto
 - [resize](https://tailwindcss.com/docs/resize): resize (both), resize-none, resize-x, resize-y
 - [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior): scroll-auto, scroll-smooth
 - [scrollbar-color](https://tailwindcss.com/docs/scrollbar-color): scrollbar-{color}-{shade} for thumb; scrollbar-track-{color}-{shade} for track; scrollbar-color-auto
 - [scrollbar-width](https://tailwindcss.com/docs/scrollbar-width): scrollbar-auto, scrollbar-thin, scrollbar-none
 - [scrollbar-gutter](https://tailwindcss.com/docs/scrollbar-gutter): scrollbar-gutter-auto, scrollbar-gutter-stable, scrollbar-gutter-stable-both-edges
 - [scroll-margin](https://tailwindcss.com/docs/scroll-margin): scroll-m-0 through scroll-m-96; scroll-mx-*, scroll-my-*, scroll-mt-*, scroll-mr-*, scroll-mb-*, scroll-ml-*; arbitrary
 - [scroll-padding](https://tailwindcss.com/docs/scroll-padding): scroll-p-0 through scroll-p-96; scroll-px-*, scroll-py-*, scroll-pt-*, scroll-pr-*, scroll-pb-*, scroll-pl-*; arbitrary
 - [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align): snap-start, snap-end, snap-center, snap-align-none
 - [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop): snap-normal, snap-always
 - [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type): snap-none, snap-x, snap-y, snap-both; snap-mandatory, snap-proximity
 - [touch-action](https://tailwindcss.com/docs/touch-action): touch-auto, touch-none, touch-pan-x, touch-pan-left, touch-pan-right, touch-pan-y, touch-pan-up, touch-pan-down, touch-pinch-zoom, touch-manipulation
 - [user-select](https://tailwindcss.com/docs/user-select): select-none, select-text, select-all, select-auto
 - [will-change](https://tailwindcss.com/docs/will-change): will-change-auto, will-change-scroll, will-change-contents, will-change-transform; arbitrary

 ## Utility Reference — SVG

 - [fill](https://tailwindcss.com/docs/fill): fill-none, fill-current, fill-{color}-{shade}; opacity modifier
 - [stroke](https://tailwindcss.com/docs/stroke): stroke-none, stroke-current, stroke-{color}-{shade}; opacity modifier
 - [stroke-width](https://tailwindcss.com/docs/stroke-width): stroke-0, stroke-1, stroke-2; arbitrary

 ## Utility Reference — Accessibility

 - [forced-color-adjust](https://tailwindcss.com/docs/forced-color-adjust): forced-color-adjust-auto (adapts to Windows high-contrast / forced-colors mode), forced-color-adjust-none (opt out — use for charts or color-coded content where color carries meaning)
No results found