### Install @tailwindcss/container-queries Plugin

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Installs the container queries plugin using npm. This is a prerequisite for using container query utilities in Tailwind CSS v3.2.

```sh
npm install -D @tailwindcss/container-queries
```

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

### Tailwind Configuration with Container Sizes and Prefix

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

This Javascript configuration example demonstrates how to extend the Tailwind theme with custom container sizes and apply a prefix to all utility classes. It also shows how to include the container queries plugin.

```javascript
// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',   // 256px
        'xs': '20rem',    // 320px (default)
        'sm': '24rem',    // 384px (default)
        'md': '28rem',    // 448px (default)
        'lg': '32rem',    // 512px (default)
        'xl': '36rem',    // 576px (default)
        '2xl': '42rem',   // 672px (default)
        '3xl': '48rem',   // 768px (default)
        '4xl': '56rem',   // 896px (default)
        '5xl': '64rem',   // 1024px (default)
        '6xl': '72rem',   // 1152px (default)
        '7xl': '80rem',   // 1280px (default)
        '8xl': '90rem',   // 1440px (custom)
      },
    },
  },
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}
```

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

### Configure Tailwind CSS to Use Container Queries Plugin

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Adds the @tailwindcss/container-queries plugin to the `tailwind.config.js` file. This enables the plugin's functionality within your Tailwind CSS setup.

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}
```

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

### Basic Container Query Usage with Tailwind CSS Utilities

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

Demonstrates how to apply the `@container` utility to a parent element and use size-based variants on child elements to create responsive components that adapt to the parent's width.

```html
<div class="@container bg-gray-100 p-4">
  <div class="text-sm @md:text-lg @lg:text-xl">
    <!-- Text size: sm by default -->
    <!-- Text size: lg when container >= 28rem (448px) -->
    <!-- Text size: xl when container >= 32rem (512px) -->
  </div>
  <div class="grid grid-cols-1 @lg:grid-cols-2 @3xl:grid-cols-3 gap-4">
    <!-- 1 column by default -->
    <!-- 2 columns when container >= 32rem -->
    <!-- 3 columns when container >= 48rem -->
  </div>
</div>
```

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

### Basic Container Query Usage with Tailwind CSS

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Demonstrates how to mark an element as a container using the `@container` class and apply responsive styles using container variants like `@md:`. The styles are applied based on the container's size, not the viewport.

```html
<div class="@container">
  <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
  </div>
</div>
```

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

### Testing Container Query CSS Output

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

This Typescript test case verifies the generated CSS for various container query patterns, including default containers, named containers, responsive variants, and arbitrary sizes. It uses a test runner function `run`.

```typescript
import { run } from './run'

const config = {
  content: [{
    raw: `
      <div class="@container @container/sidebar">
        <div class="@md:underline"></div>
        <div class="@lg/sidebar:flex"></div>
        <div class="@[450px]:grid"></div>
      </div>
    `
  }],
  theme: {
    containers: {
      sm: '320px',
      md: '768px',
      lg: '1024px',
    },
  },
  plugins: [require('@tailwindcss/container-queries')],
}

const input = `@tailwind utilities;`

run(input, config).then((result) => {
  // Expected CSS output:
  // .@container { container-type: inline-size; }
  // .@container\/sidebar { container-type: inline-size; container-name: sidebar; }
  // @container (min-width: 450px) { .@\[450px\]\:grid { display: grid; } }
  // @container (min-width: 768px) { .@md\:underline { text-decoration-line: underline; } }
  // @container sidebar (min-width: 1024px) { .@lg\/sidebar\:flex { display: flex; } }
  console.log(result.css)
})
```

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

### Implementing Named Container Queries in HTML

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

Shows how to use named containers with the `@container/{name}` syntax to precisely target specific containers, especially useful in nested scenarios to avoid ambiguity. It applies styles based on the named container's size.

```html
<div class="@container/sidebar">
  <nav class="@container/nav">
    <div class="@lg/sidebar:w-64 @md/nav:flex">
      <!-- Width 64 when 'sidebar' container >= 32rem -->
      <!-- Display flex when 'nav' container >= 28rem -->
      <!-- Named containers prevent ambiguity in nested scenarios -->
    </div>
  </nav>
  <div class="@sm/sidebar:block @lg/sidebar:grid @lg/sidebar:grid-cols-2">
    <!-- Block display when sidebar >= 24rem -->
    <!-- Grid with 2 columns when sidebar >= 32rem -->
  </div>
</div>
```

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

### Using Arbitrary Container Size Values in HTML

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

Illustrates how to define one-off container query breakpoints using arbitrary values with square bracket notation (`@[value]`) for precise control over responsive styles based on container width.

```html
<div class="@container">
  <div class="hidden @[450px]:block @[800px]:flex @[800px]:justify-between">
    <!-- Hidden by default -->
    <!-- Block display when container >= 450px -->
    <!-- Flex layout with space-between when container >= 800px -->
  </div>
</div>

<div class="@container/card">
  <div class="@[17.5rem]/card:p-6 @[25rem]/card:p-8">
    <!-- Padding 6 when 'card' container >= 17.5rem -->
    <!-- Padding 8 when 'card' container >= 25rem -->
  </div>
</div>
```

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

### Registering Container Queries Plugin and Customizing Theme

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

This snippet shows how to register the @tailwindcss/container-queries plugin in your `tailwind.config.js` file and extend the default theme configuration to add custom container sizes.

```javascript
module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
        '8xl': '96rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}
```

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

### Implement Container Variants with matchVariant

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

This snippet demonstrates using `matchVariant` to create responsive variants for container queries. It handles dynamic sorting based on size and alphabetical container name ordering.

```typescript
import plugin from 'tailwindcss/plugin'

export = plugin(
  function containerQueries({ matchVariant, theme }) {
    let values = theme('containers') ?? {}

    function parseValue(value: string) {
      let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/) Re.[1] ?? null
      if (numericValue === null) return null
      return parseFloat(value)
    }

    matchVariant(
      '@',
      (value = '', { modifier }) => {
        let parsed = parseValue(value)
        return parsed !== null
          ? `@container ${modifier ?? ''} (min-width: ${value})`
          : []
      },
      {
        values,
        sort(aVariant, zVariant) {
          let a = parseFloat(aVariant.value)
          let z = parseFloat(zVariant.value)

          if (a === null || z === null) return 0
          if (a - z !== 0) return a - z

          let aLabel = aVariant.modifier ?? ''
          let zLabel = zVariant.modifier ?? ''

          if (aLabel === '' && zLabel !== '') return 1
          if (aLabel !== '' && zLabel === '') return -1

          return aLabel.localeCompare(zLabel, 'en', { numeric: true })
        },
      }
    )
    // Generates CSS:
    // @container (min-width: 28rem) { .@md\:underline { text-decoration-line: underline; } }
    // @container sidebar (min-width: 32rem) { .@lg/sidebar\:flex { display: flex; } }
  }
)
```

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

### Implement Container Utilities with matchUtilities

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

This snippet shows how to use Tailwind's `matchUtilities` API to register the `@container` utility. It supports modifiers for container names and provides default and custom `container-type` values.

```typescript
import plugin from 'tailwindcss/plugin'

export = plugin(
  function containerQueries({ matchUtilities, theme }) {
    matchUtilities(
      {
        '@container': (value, { modifier }) => {
          return {
            'container-type': value,
            'container-name': modifier,
          }
        },
      },
      {
        values: {
          DEFAULT: 'inline-size',
          normal: 'normal',
        },
        modifiers: 'any',
      }
    )
    // Generates:
    // .@container { container-type: inline-size; }
    // .@container-normal { container-type: normal; }
    // .@container/sidebar { container-type: inline-size; container-name: sidebar; }
  }
)
```

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

### HTML Usage with Prefixed Container Classes

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

This HTML snippet illustrates how to use container query classes when a prefix is configured in Tailwind CSS. It shows that the prefix is applied to container classes but not necessarily to responsive variants within them.

```html
<!-- With prefix configured -->
<div class="tw-@container">
  <div class="@md:tw-underline @lg:tw-font-bold">
    <!-- Prefix on container class, but NOT on variant -->
    <!-- Prefix on utility classes -->
  </div>
</div>
```

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

### Named Container Queries in Tailwind CSS

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Shows how to define and use named containers with Tailwind CSS. This allows for more specific styling when multiple containers are present on a page, using the `@container/{name}` and `@lg/{name}:` syntax.

```html
<div class="@container/main">
  <!-- ... -->
  <div class="@lg/main:underline">
    <!-- This text will be underlined when the "main" container is larger than `32rem` -->
  </div>
</div>
```

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

### Arbitrary Container Size Queries in Tailwind CSS

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Illustrates how to use arbitrary values for container query breakpoints in Tailwind CSS. This provides flexibility for one-off or custom container size requirements, using the `@[value]:` syntax.

```html
<div class="@container">
  <div class="@[17.5rem]:underline">
    <!-- This text will be underlined when the container is larger than `17.5rem` -->
  </div>
</div>
```

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

### Container Queries with Tailwind CSS Prefix

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Explains how to use container query utilities when a custom prefix is configured in Tailwind CSS. Both the container class (`@container`) and the query modifiers must be prefixed.

```html
<div class="tw-@container">
  <!-- ... -->
  <div class="@lg:tw-underline">
    <!-- ... -->
  </div>
</div>
```

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

### Controlling Container Type Variants with Tailwind CSS

Source: https://context7.com/tailwindlabs/tailwindcss-container-queries/llms.txt

Demonstrates how to manage container type behavior using utilities like `@container-normal` or arbitrary container types (`@[type]`). This allows styles to respond to different container query behaviors, including size-only or size and height.

```html
<div class="@container lg:@container-normal">
  <!-- Container queries active below lg breakpoint -->
  <!-- Container queries disabled at lg viewport breakpoint and above -->
  <div class="@md:underline">
    <!-- Only underlined when parent is a container AND >= 28rem -->
  </div>
</div>

<div class="@container-[size]">
  <!-- Size container: tracks both width and height -->
  <div class="@lg:aspect-square">
    <!-- Responds to both dimensions -->
  </div>
</div>

<div class="@container-[size]/gallery">
  <!-- Named size container -->
  <div class="@2xl/gallery:columns-3">
    <!-- Three columns when gallery >= 42rem in both dimensions -->
  </div>
</div>
```

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

### Extend Container Sizes in Tailwind CSS Configuration

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Shows how to add custom container sizes to the `tailwind.config.js` file. This allows you to define new container breakpoints beyond the default set, under the `extend.containers` key.

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
      },
    },
  },
}
```

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

### Remove Container Functionality in Tailwind CSS

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/README.md

Demonstrates how to disable container query functionality on an element using the `@container-normal` class. This stops the element from acting as a container for subsequent responsive styles.

```html
<div class="@container xl:@container-normal">
  <!-- ... -->
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.