Tailwind CSS Container Queries

https://github.com/tailwindlabs/tailwindcss-container-queries
Admin
A plugin for Tailwind CSS v3.2+ that provides utilities for implementing container queries, enabling...
Tokens:22,528
Snippets:340
Trust Score:9.3
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install the plugin

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

Install the package via npm.

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

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

### Arbitrary Container Size @[400px]

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example using an arbitrary pixel-based container size.

```html
<div class="@container">
  <div class="@[400px]:text-lg">
```

```css
@container (min-width: 400px) {
  .\@\[400px\]\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
```

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

### Framework Development Server Commands

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Standard commands to start development servers for common frameworks.

```bash
# Next.js
npm run dev

# Vite
npm run dev

# Create React App
npm start
```

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

### Configure ESM Setup

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Use ES module syntax to import and register the plugin.

```typescript
import containerQueries from '@tailwindcss/container-queries'

export default {
  // ... config
  plugins: [containerQueries],
}
```

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

### Arbitrary Container Size @[17.5rem]

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example using an arbitrary fractional rem-based container size.

```html
<div class="@container">
  <div class="@[17.5rem]:underline">
```

```css
@container (min-width: 17.5rem) {
  .\@\[17\.5rem\]\:underline {
    text-decoration-line: underline;
  }
}
```

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

### ES Module Usage

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Example of importing the plugin in an ES module environment.

```typescript
import plugin from '@tailwindcss/container-queries'
export default { plugins: [plugin] }
```

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

### Arbitrary Container Size @[25rem]

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example using an arbitrary rem-based container size.

```html
<div class="@container">
  <div class="@[25rem]:font-bold">
```

```css
@container (min-width: 25rem) {
  .\@\[25rem\]\:font-bold {
    font-weight: 700;
  }
}
```

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

### Usage examples for @container utilities

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/api-reference-plugin.md

Demonstrates applying container contexts, named containers, arbitrary types, and resetting container behavior.

```html
<!-- Mark as default inline-size container -->
<div class="@container">
  <div class="@lg:text-lg">Content</div>
</div>

<!-- Named container -->
<div class="@container/sidebar">
  <div class="@lg/sidebar:text-lg">Sidebar content</div>
</div>

<!-- Arbitrary container type -->
<div class="@container-[size]">
  Content responds to both width and height
</div>

<!-- Remove container behavior -->
<div class="@container lg:@container-normal">
  Container on small screens, normal on large screens
</div>
```

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

### Combine Container and Responsive Variants

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example of using both responsive and container variants on an element.

```html
<div class="@container">
  <div class="text-base md:text-lg @lg:text-xl">
```

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

### CommonJS Usage

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Example of requiring the plugin in a CommonJS environment.

```javascript
const plugin = require('@tailwindcss/container-queries')
module.exports = { plugins: [plugin] }
```

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

### Example ContainerSizes value

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

A sample object demonstrating the expected structure for container size definitions.

```typescript
{
  xs: '20rem',
  sm: '24rem',
  md: '28rem',
  lg: '32rem',
  xl: '36rem',
  '2xl': '42rem',
  '3xl': '48rem',
  '4xl': '56rem',
  '5xl': '64rem',
  '6xl': '72rem',
  '7xl': '80rem',
}
```

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

### Tailwind Configuration Integration

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Example of how to register the plugin and extend container sizes within the Tailwind configuration file.

```javascript
module.exports = {
  theme: {
    extend: {
      containers: {
        // User supplies custom sizes here
      },
    },
  },
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Arbitrary Named Container Size

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example combining arbitrary size notation with a named container.

```html
<div class="@container/main">
  <div class="@[30em]/main:border-l-4">
```

```css
@container main (min-width: 30em) {
  .\@\[30em\]\/main\:border-l-4 {
    border-left-width: 4px;
    border-color: currentColor;
  }
}
```

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

### Install Plugin via Package Manager

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Use npm or yarn to add the container queries plugin as a development dependency.

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

```bash
yarn add -D @tailwindcss/container-queries
```

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

### Generated CSS At-Rules

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

Examples of CSS output generated for predefined, named, and arbitrary container sizes.

```css
/* Predefined size */
@container (min-width: 28rem) {
  .@md\:text-lg { font-size: 1.125rem; }
}

/* Named container */
@container sidebar (min-width: 32rem) {
  .@lg\/sidebar\:px-6 { padding: 0 1.5rem; }
}

/* Arbitrary size */
@container (min-width: 400px) {
  .@\[400px\]\:underline { text-decoration-line: underline; }
}
```

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

### Configure Tailwind CSS with TypeScript

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

Example of importing and using the plugin within a TypeScript Tailwind configuration file.

```typescript
import plugin from '@tailwindcss/container-queries'
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
      },
    },
  },
  plugins: [plugin],
}

export default config
```

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

### Named Container Query Specification

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example of a named container query following the CSS specification.

```css
@container sidebar (min-width: 32rem) {
  .text {
    color: blue;
  }
}
```

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

### Resolve Plugin Version Conflicts

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Commands to inspect installed versions and perform a clean reinstallation of dependencies.

```bash
# Check installed versions
npm ls @tailwindcss/container-queries
npm ls tailwindcss

# Reinstall clean
rm -rf node_modules package-lock.json
npm install
```

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

### Check Tailwind CSS Version

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Verify that the installed version of Tailwind CSS meets the minimum requirement of 3.2.0.

```bash
npm list tailwindcss
```

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

### Named Container Variant @lg/main

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example of a named container variant targeting a main container at the lg breakpoint.

```html
<div class="@container/main">
  <div class="@lg/main:px-6">
```

```css
@container main (min-width: 32rem) {
  .\@lg\/main\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
```

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

### Usage examples for parseValue

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/api-reference-plugin.md

Demonstrates how parseValue handles various CSS length strings and non-numeric inputs.

```typescript
parseValue('24rem')     // → 24
parseValue('400px')     // → 400
parseValue('17.5rem')   // → 17.5
parseValue('.5rem')     // → 0.5
parseValue('auto')      // → null
parseValue('inherit')   // → null
```

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

### Generate Container Query At-Rules

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

Example of the CSS at-rule generated by the container query variant for a specific size breakpoint.

```css
@container (min-width: 32rem) {
  .@lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
```

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

### Named Container Variant @md/sidebar

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Example of a named container variant targeting a sidebar at the md breakpoint.

```html
<div class="@container/sidebar">
  <div class="@md/sidebar:text-lg">
```

```css
@container sidebar (min-width: 28rem) {
  .\@md\/sidebar\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
```

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

### CSS Cascade Effect Example

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/sorting-algorithm.md

Demonstrates how smaller container sizes are overridden by larger sizes due to the CSS cascade order.

```css
/* Smaller size applies first */
@container (min-width: 20rem) {
  .box { width: 100px; }
}

/* Larger size can override */
@container (min-width: 32rem) {
  .box { width: 200px; }
}

/* Container 20rem: width is 100px */
/* Container 32rem: width is 200px (32rem rule wins) */
```

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

### Package.json Configuration

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Configuration fields for main entry point and type definitions.

```json
{
  "main": "dist/index.js",
  "types": "dist/index.d.ts"
}
```

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

### Configure Minimal Container Queries

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

Use the default container sizes by adding the plugin to the configuration file.

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

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

### Configure Container Sizes

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

Demonstrates the difference between extending default container sizes and completely overriding them.

```javascript
// This keeps defaults and adds new sizes
module.exports = {
  theme: {
    extend: {
      containers: {
        xxl: '128rem',
      },
    },
  },
}
// Result: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, xxl

// This replaces ALL defaults
module.exports = {
  theme: {
    containers: {
      sm: '20rem',
      lg: '40rem',
    },
  },
}
// Result: ONLY sm and lg (xs, md, xl, etc. are gone)
```

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

### Apply Container Query Utilities

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

Use the @container class to define a context and apply responsive variants based on container size.

```html
<!-- Mark container -->
<div class="@container">
  <!-- Apply variants -->
  <div class="@lg:text-lg">Large text in large container</div>
</div>
```

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

### Implement Plugin-based Container Queries

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Utility-based implementation using the plugin syntax for container definition and responsive styling.

```html
<div class="@container/card">
  <h3 class="@sm/card:text-lg">Title</h3>
</div>
```

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

### Create Reusable Responsive Components

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Shows how to build a card component that automatically adapts its internal layout based on the size of its parent container.

```html
<!-- Card component -->
<div class="@container p-4 border rounded">
  <h3 class="@sm:text-lg @md:text-xl font-bold">Title</h3>
  <p class="@sm:text-sm @md:text-base text-gray-600">Description</p>
  <button class="@md:px-6 @sm:px-4 px-3 py-2 bg-blue-500">Action</button>
</div>

<!-- Used in different layouts -->
<div class="grid grid-cols-1 gap-4">
  <div><!-- Card renders compact --></div>
  <div><!-- Card renders compact --></div>
</div>

<div class="grid grid-cols-3 gap-4">
  <div><!-- Card renders larger --></div>
  <div><!-- Card renders larger --></div>
  <div><!-- Card renders larger --></div>
</div>
```

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

### Generate Production Build

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Commands to generate optimized, minified CSS for production environments.

```bash
# Using Tailwind CLI
npx tailwindcss -i ./src/input.css -o ./src/output.css --minify

# Using build tools (Next.js, Vite, etc.) - automatic
npm run build
```

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

### Combine Responsive and Container Query Variants

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Demonstrates how to layer responsive breakpoints with container query variants, where container queries take precedence.

```html
<div class="@container">
  <div class="text-sm sm:text-base md:text-lg @md:text-xl">
    <!-- 
    Base: text-sm
    At sm breakpoint: text-base
    At md breakpoint: text-lg
    In container at md: text-xl (overrides responsive variant)
    -->
  </div>
</div>
```

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

### Implement Nested Containers

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Illustrates how to use named containers to allow nested elements to respond to their specific parent container's size.

```html
<div class="@container/outer">
  <div class="@lg/outer:bg-blue-100">
    <!-- Blue background when outer container > 512px -->
    
    <div class="@container/inner">
      <div class="@lg/inner:text-lg">
        <!-- Large text when inner container > 512px -->
        <!-- Independent of outer container size -->
      </div>
    </div>
  </div>
</div>
```

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

### Build Process Commands

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Commands to transpile source files using SWC and generate TypeScript declaration files.

```bash
# Step 1: Transpile with SWC
swc ./src/index.ts --out-dir ./dist

# Step 2: Generate TypeScript declarations
tsc --emitDeclarationOnly
```

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

### Apply Responsive Container Queries

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Shows how to apply container queries conditionally based on viewport breakpoints.

```html
<div class="@container md:@container-normal">
  <!-- Container on mobile, normal on tablet+ -->
  <div class="@lg:text-lg md:text-lg">
    At md viewport: text-lg (responsive)
    In container at md: text-lg (container query)
    Combined effect: text-lg in both cases
  </div>
</div>
```

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

### Multiple Named Containers

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Demonstrates applying different styles to multiple named containers simultaneously.

```html
<div class="@container/header">
  <div class="@md/header:text-lg">Header</div>
</div>

<div class="@container/sidebar">
  <div class="@md/sidebar:text-sm">Sidebar</div>
</div>
```

```css
@container header (min-width: 28rem) {
  .\@md\/header\:text-lg {
    font-size: 1.125rem;
  }
}

@container sidebar (min-width: 28rem) {
  .\@md\/sidebar\:text-sm {
    font-size: 0.875rem;
  }
}
```

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

### Generate CSS from Container Configuration

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

Shows the mapping between a container size configuration and the resulting CSS output.

```javascript
// Configuration
containers: { lg: '32rem' }

// Generated CSS
@container (min-width: 32rem) {
  .@lg\:text-lg {
    font-size: 1.125rem;
  }
}
```

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

### Default plugin configuration

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/api-reference-plugin.md

The default theme configuration defines standard container sizes.

```json
{
  theme: {
    containers: {
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      '7xl': '80rem',
    },
  },
}
```

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

### Apply container query variants in HTML

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/api-reference-plugin.md

Demonstrates applying standard, named, and arbitrary container query variants to elements within a container.

```html
<!-- Standard container variant -->
<div class="@container">
  <div class="@lg:underline">Underline when container > 512px</div>
</div>

<!-- Named container variant -->
<div class="@container/main">
  <div class="@md/main:font-bold">Bold when 'main' container > 448px</div>
</div>

<!-- Arbitrary size variant -->
<div class="@container">
  <div class="@[25rem]:text-lg">Large text when container > 25rem</div>
</div>

<!-- Multiple container names -->
<div class="@container/header">
  <div class="@sm/header:px-4">Padding when 'header' > 384px</div>
</div>
<div class="@container/sidebar">
  <div class="@sm/sidebar:px-2">Padding when 'sidebar' > 384px</div>
</div>
```

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

### Access Theme Configuration

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Retrieves container size configurations from the theme.

```typescript
theme('containers')
```

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

### Define Manual CSS Container Queries

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Standard CSS approach for defining container types and names before using the plugin.

```css
.card {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 20rem) {
  .card-title {
    font-size: 1.125rem;
  }
}
```

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

### Stacking Container Query Utilities

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Illustrates how multiple container query classes on a single element generate separate, nested at-rules in the generated CSS.

```html
<div class="@container">
  <div class="@md:text-lg @lg:underline @2xl:font-bold">
```

```css
@container (min-width: 28rem) {
  .\@md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@container (min-width: 32rem) {
  .\@lg\:underline {
    text-decoration-line: underline;
  }
}

@container (min-width: 42rem) {
  .\@2xl\:font-bold {
    font-weight: 700;
  }
}
```

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

### Create a Responsive Component

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

Apply responsive styles to component elements based on the parent container's width.

```html
<div class="@container p-4 border rounded">
  <h3 class="@sm:text-lg @md:text-xl font-bold">Title</h3>
  <p class="@sm:text-sm @md:text-base">Description</p>
</div>
```

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

### CSS Minification Comparison

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Comparison of CSS output before and after minification for production environments.

```css
@container (min-width: 28rem) {
  .\@md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
```

```css
@container (min-width: 28rem){.\@md\:text-lg{font-size:1.125rem;line-height:1.75rem}}
```

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

### Module Import Methods

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Supported methods for importing the plugin into a project.

```javascript
const containerQueries = require('@tailwindcss/container-queries')
// or
import containerQueries from '@tailwindcss/container-queries'
```

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

### Mirror Responsive Breakpoints

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

Align container sizes with existing responsive screen breakpoints for consistent design systems.

```javascript
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    extend: {
      containers: {
        sm: '640px',   // Match screen breakpoints
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
    },
  },
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Apply Prefixed Container Classes

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Use the configured prefix on both the container definition and the corresponding variant classes.

```html
<div class="tw-@container">
  <div class="tw-@lg:text-lg">Content</div>
</div>

<div class="tw-@container/sidebar">
  <div class="tw-@lg/sidebar:text-lg">Sidebar content</div>
</div>
```

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

### Apply container queries

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

Mark an element as a container and apply styles based on its size.

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

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

### Use Prefixed Container Classes

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

Apply the configured prefix to container utility classes and variants in HTML.

```html
<!-- Utility gets prefix -->
<div class="tw-@container">
  <!-- Variant gets prefix on the utility class, not the variant -->
  <div class="tw-@lg:underline">Content</div>
</div>

<!-- Named container -->
<div class="tw-@container/main">
  <div class="tw-@lg/main:text-lg">Content</div>
</div>
```

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

### Apply Arbitrary Container Sizes

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

Use square bracket notation to define custom container query breakpoints.

```html
<div class="@container">
  <div class="@[25rem]:text-lg">At 25rem</div>
  <div class="@[400px]:text-lg">At 400px</div>
</div>
```

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

### Define Container Queries in TypeScript Config

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Import the plugin and define custom container sizes within the theme configuration.

```typescript
import containerQueries from '@tailwindcss/container-queries'
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      containers: {
        md: '30rem',
      },
    },
  },
  plugins: [containerQueries],
}

export default config
```

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

### Importing the Plugin

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Standard import statement for the package.

```typescript
import plugin from '@tailwindcss/container-queries'
```

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

### Use named containers

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

Define a named container and target it specifically with variants.

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

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

### Manage Multiple Independent Containers

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Demonstrates using named containers to allow sibling elements to respond to their own specific container constraints.

```html
<div class="grid grid-cols-2 gap-4">
  <div class="@container/left">
    <h2 class="@md/left:text-2xl">Left Panel</h2>
  </div>
  
  <div class="@container/right">
    <h2 class="@md/right:text-2xl">Right Panel</h2>
  </div>
</div>
```

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

### Available Container Breakpoints

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

List of predefined container query variants and their corresponding pixel widths.

```html
<div class="@container">
  <div class="@xs:text-sm">Extra small (20rem / 320px)</div>
  <div class="@sm:text-base">Small (24rem / 384px)</div>
  <div class="@md:text-lg">Medium (28rem / 448px)</div>
  <div class="@lg:text-xl">Large (32rem / 512px)</div>
  <div class="@xl:text-2xl">Extra large (36rem / 576px)</div>
  <div class="@2xl:text-3xl">2XL (42rem / 672px)</div>
  <div class="@3xl:text-4xl">3XL (48rem / 768px)</div>
  <div class="@4xl:text-5xl">4XL (56rem / 896px)</div>
  <div class="@5xl:text-6xl">5XL (64rem / 1024px)</div>
  <div class="@6xl:text-7xl">6XL (72rem / 1152px)</div>
  <div class="@7xl:text-8xl">7XL (80rem / 1280px)</div>
</div>
```

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

### Configure Prefix for Container Queries

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Include the plugin in your tailwind.config.js file while applying a prefix to avoid class name collisions.

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

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

### Size Container Utility

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Queries both width and height, noting limited browser support.

```html
<div class="@container-[size]">
```

```css
.\@container-\[size\] {
  container-type: size;
}
```

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

### Using Decimal and Fractional Values

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Support for precise sizing using decimal and fractional CSS length units.

```html
<div class="@container">
  <div class="@[17.5rem]:text-lg">
    At 17.5rem (280px)
  </div>

  <div class="@[18.75rem]:text-xl">
    At 18.75rem (300px)
  </div>

  <div class="@[22.625rem]:text-2xl">
    At 22.625rem (362px)
  </div>
</div>
```

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

### Configure the plugin

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

Add the plugin to your tailwind.config.js file.

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

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

### Define Custom Container Sizes

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Correctly define custom container sizes within the theme configuration.

```javascript
// ✓ Correct
theme: {
  extend: {
    containers: {
      custom: '50rem',
    },
  },
}

// ✗ Wrong (won't work)
theme: {
  extend: {
    container: {  // Should be "containers"
      custom: '50rem',
    },
  },
}
```

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

### Demonstrate numeric-aware sorting

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/sorting-algorithm.md

Comparison of lexicographic versus numeric-aware sorting behavior.

```text
// Without numeric: true (lexicographic)
col1, col10, col2, col3, col9

// With numeric: true (numeric-aware)
col1, col2, col3, col9, col10
```

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

### plugin(handler, config)

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

The primary entry point for the plugin. Users must import the plugin and include it in the plugins array of their Tailwind CSS configuration.

```APIDOC
## Tailwind CSS Plugin Integration

### Description
Integrate the container queries plugin into a Tailwind CSS project by adding it to the plugins array in the configuration file.

### Usage
```javascript
module.exports = {
  plugins: [require('@tailwindcss/container-queries')],
}
```

### Configuration Parameters
Users can extend container sizes via the theme configuration:

- **containers** (object) - Optional - A map of custom container size names (keys) and CSS length strings (values).
```

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

### Querying Named Containers

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Apply responsive variants using the @{size}/{name}: syntax to target specific named containers.

```html
<div class="@container/sidebar">
  <h3 class="@md/sidebar:text-lg">
    Sidebar title (large at md in sidebar container)
  </h3>
</div>

<div class="@container/main">
  <article>
    <h1 class="@md/main:text-2xl">
      Article title (large at md in main container)
    </h1>
  </article>
</div>
```

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

### Implement Named Containers

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

Use slash notation to define and target named containers directly in HTML without explicit configuration.

```html
<!-- No configuration needed -->
<div class="@container/sidebar">
  <div class="@lg/sidebar:text-lg">Content</div>
</div>

<div class="@container/header">
  <div class="@lg/header:text-lg">Content</div>
</div>
```

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

### Configure Default Container Sizes

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

Defines the default container size breakpoints within the theme configuration.

```javascript
{
  theme: {
    containers: {
      xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem',
      '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem',
      '6xl': '72rem', '7xl': '80rem',
    },
  },
}
```

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

### Apply arbitrary container sizes

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

Use arbitrary values for container query breakpoints.

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

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

### Numeric Sort Order for Container Queries

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Demonstrates how container queries are ordered by their numeric width value in ascending order.

```css
/* Smaller sizes first */
@container (min-width: 20rem) {
  /* xs: 20 */
}

@container (min-width: 24rem) {
  /* sm: 24 */
}

@container (min-width: 28rem) {
  /* md: 28 */
}

@container (min-width: 32rem) {
  /* lg: 32 */
}

@container (min-width: 100rem) {
  /* Custom: 100 */
}
```

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

### Dashboard Layout with Named Containers

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Demonstrates independent responsiveness for sidebar and main content areas using multiple named containers.

```html
<div class="grid grid-cols-12 gap-4">
  <!-- Sidebar container -->
  <aside class="col-span-3 @container/sidebar">
    <div class="space-y-4">
      <nav class="@lg/sidebar:flex @lg/sidebar:flex-col">
        <a class="@md/sidebar:px-4 block">Link 1</a>
        <a class="@md/sidebar:px-4 block">Link 2</a>
      </nav>
    </div>
  </aside>

  <!-- Main content container -->
  <main class="col-span-9 @container/main">
    <div class="grid grid-cols-1 @md/main:grid-cols-2 @lg/main:grid-cols-3">
      <div class="@sm/main:p-4 @md/main:p-6">Card 1</div>
      <div class="@sm/main:p-4 @md/main:p-6">Card 2</div>
      <div class="@sm/main:p-4 @md/main:p-6">Card 3</div>
    </div>
  </main>
</div>
```

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

### Register the plugin in TypeScript

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

Use the satisfies Config syntax for type-safe configuration in TypeScript projects.

```typescript
import type { Config } from 'tailwindcss'
import containerQueries from '@tailwindcss/container-queries'

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    // theme configuration
  },
  plugins: [containerQueries],
} satisfies Config
```

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

### Implement Multiple Independent Containers

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

Use named containers to manage independent responsive logic within the same layout.

```html
<div class="grid grid-cols-2">
  <aside class="@container/sidebar">
    <div class="@lg/sidebar:text-lg">Sidebar</div>
  </aside>
  <main class="@container/main">
    <div class="@lg/main:text-lg">Main</div>
  </main>
</div>
```

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

### Verify Plugin Configuration

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Ensure the plugin is correctly registered in the Tailwind configuration file.

```javascript
plugins: [require('@tailwindcss/container-queries')]
```

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

### Integrate with Vite

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Configure the PostCSS plugin in vite.config.js and register the container queries plugin in tailwind.config.js.

```javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
})
```

```javascript
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Plugin Entry Point

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

The module exports as a Tailwind CSS plugin using CommonJS, requiring a plugin function and a configuration object.

```typescript
export = plugin(pluginFn, config)
```

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

### Configure Content Glob

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Define the file paths that Tailwind should scan for classes.

```javascript
content: ['./src/**/*.{js,ts,jsx,tsx}']
```

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

### Rebuild CSS After Config Changes

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Clear build artifacts and trigger a fresh build to apply configuration changes.

```bash
rm -rf .next  # if using Next.js
npm run build
```

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

### Use with a prefix

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

Ensure the prefix is applied to both the container class and the query modifiers.

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

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

### Retrieve configuration with theme function

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

Accesses container configuration values using the theme helper function.

```typescript
function theme(path: string): any
```

```typescript
let values: Record<string, string> = theme('containers') ?? {}
```

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

### Registering Named Containers

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Use the @container/{name} class to define a named container for scoped responsive styling.

```html
<div class="@container/sidebar">
  <h3>Sidebar Title</h3>
  <p>Sidebar content</p>
</div>

<div class="@container/main">
  <article>
    <h1>Article Title</h1>
    <p>Article content</p>
  </article>
</div>
```

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

### Named Container Utility

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Creates a named inline-size container.

```html
<div class="@container/sidebar">
```

```css
.\@container\/sidebar {
  container-type: inline-size;
  container-name: sidebar;
}
```

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

### Integrate with Next.js

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Add the plugin to the tailwind.config.js file in the project root.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Configure Container Sizes

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

Define container sizes using standard CSS length units like rem, px, em, or vw within the configuration object.

```javascript
containers: { lg: '20rem' }
```

```javascript
containers: { lg: '320px' }
```

```javascript
containers: { lg: '32em' }
```

```javascript
containers: { lg: '50vw' }
```

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

### Generate Container Property Declarations

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

CSS output showing how container-type and container-name properties are applied to utility classes.

```css
.@container {
  container-type: inline-size;
  container-name: unset;
}

.@container\/sidebar {
  container-type: inline-size;
  container-name: sidebar;
}
```

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

### Default Container Utility

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Marks an element as an inline-size container.

```html
<div class="@container">
```

```css
.\@container {
  container-type: inline-size;
}
```

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

### Configure Content Globs for Tailwind

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Include all relevant template files in the content array to ensure the plugin generates necessary CSS.

```javascript
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,vue,svelte}',
    './pages/**/*.html',
    './components/**/*.tsx',
  ],
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Create React Hook for Container Queries

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Uses ResizeObserver to track and return the width of a container element for dynamic layout adjustments.

```typescript
import { useEffect, useRef, useState } from 'react'

export function useContainerSize() {
  const ref = useRef<HTMLDivElement>(null)
  const [width, setWidth] = useState(0)

  useEffect(() => {
    if (!ref.current) return

    const observer = new ResizeObserver((entries) => {
      setWidth(entries[0].contentRect.width)
    })

    observer.observe(ref.current)

    return () => observer.disconnect()
  }, [])

  return { ref, width }
}

// Usage with styled-components or CSS-in-JS if needed
function Component() {
  const { ref, width } = useContainerSize()

  return (
    <div ref={ref} className="@container">
      <div>Width: {width}px</div>
    </div>
  )
}
```

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

### Apply Container Query Variant

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

Apply styles based on the ancestor container's size condition.

```html
<div class="@lg:text-lg">       <!-- Applies if container >= 32rem -->
```

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

### Dependency Chain

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Visual representation of the required dependency hierarchy for the plugin.

```text
@tailwindcss/container-queries
    ↓
tailwindcss >= 3.2.0
    ↓
postcss
    ↓
node.js environment
```

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

### Named Normal Container Utility

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Establishes a container name without setting a container context.

```html
<div class="@container-normal/sidebar">
```

```css
.\@container-normal\/sidebar {
  container: sidebar;
}
```

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

### Define Semantic Container Sizes

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

Override default sizes with custom semantic names like mobile, tablet, and desktop.

```javascript
module.exports = {
  theme: {
    containers: {
      mobile: '22rem',    // 352px
      tablet: '45rem',    // 720px
      desktop: '75rem',   // 1200px
      wide: '100rem',     // 1600px
    },
  },
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### View Generated Plugin Type Definitions

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Reference the generated declaration file to understand the plugin's exported type structure.

```typescript
// dist/index.d.ts (generated after build)
declare const plugin: (
  options?: { theme?: { containers?: Record<string, string> } }
) => any

export default plugin
```

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

### Register @container utilities

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/api-reference-plugin.md

The plugin uses matchUtilities to register container-type and container-name classes with support for arbitrary values and modifiers.

```typescript
matchUtilities(
  {
    '@container': (value, { modifier }) => ({
      'container-type': value,
      'container-name': modifier,
    }),
  },
  {
    values: {
      DEFAULT: 'inline-size',
      normal: 'normal',
    },
    modifiers: 'any',
  }
)
```

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

### Integrate with Vue and Vite

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Include .vue files in the content array and register the plugin in tailwind.config.js.

```javascript
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts}',
  ],
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Numeric Value Parsing for Sorting

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

Shows how the plugin extracts numeric values from size definitions to determine sorting order.

```javascript
containers: {
  small: '20rem',    // numeric: 20
  tiny: '10rem',     // numeric: 10
  large: '100px',    // numeric: 100
}
```

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

### Integrate with PostCSS Only

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Define the Tailwind plugin in postcss.config.js and configure the content paths in tailwind.config.js.

```javascript
module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwind.config.js',
    },
    autoprefixer: {},
  },
}
```

```javascript
module.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Configure Utility Options

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Sets default values and modifier behavior for the container utility.

```typescript
{
  values: { DEFAULT: 'inline-size', normal: 'normal' },
  modifiers: 'any',
}
```

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

### Combine Multiple Container Variants

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Stack multiple variants to create progressive styling based on container width thresholds.

```html
<div class="@container">
  <div class="text-sm @sm:text-base @md:text-lg @lg:text-xl">
    Progressive text sizing
  </div>
</div>
```

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

### 5XL Breakpoint Variant

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Applies styles at the 64rem (1024px) breakpoint.

```html
<div class="@container">
  <div class="@5xl:text-6xl">
```

```css
@container (min-width: 64rem) {
  .\@5xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}
```

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

### Using Arbitrary Breakpoints

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Apply styles based on specific container widths using arbitrary CSS length values.

```html
<div class="@container">
  <div class="@[400px]:text-lg">
    Large text when container > 400px
  </div>

  <div class="@[25rem]:font-bold">
    Bold when container > 25rem (400px)
  </div>

  <div class="@[600px]:underline">
    Underline when container > 600px
  </div>

  <div class="@[30em]:border-l-4">
    Left border when container > 30em
  </div>
</div>
```

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

### Generated CSS for Container and Responsive Variants

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

The resulting CSS output showing separate at-rules for media and container queries.

```css
.\text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 28rem) {
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@container (min-width: 32rem) {
  .\@lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
```

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

### Named Size Container Utility

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Creates a named container with size context type.

```html
<div class="@container-[size]/hero">
```

```css
.\@container-\[size\]\/hero {
  container: hero / size;
}
```

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

### Apply Arbitrary Container Sizes

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

Use arbitrary CSS length values directly in HTML class names without requiring prior configuration.

```html
<!-- Use any CSS length value -->
<div class="@[17.5rem]:text-lg">
  Text becomes large when container > 17.5rem
</div>

<div class="@[640px]:font-bold">
  Bold when container > 640px
</div>

<div class="@[30em]:underline">
  Underline when container > 30em
</div>
```

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

### Normal Container Utility

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/css-output.md

Resets an element to normal container behavior.

```html
<div class="@container-normal">
```

```css
.\@container-normal {
  container-type: normal;
}
```

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

### Apply Container Query Variants

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Use @{size}: variants to apply styles to child elements based on the width of the parent container.

```html
<div class="@container">
  <h2 class="@md:text-lg @lg:text-2xl">
    Responsive title
  </h2>
  <p class="@md:px-4 @lg:px-6">
    Responsive paragraph
  </p>
</div>
```

```css
@container (min-width: 28rem) {
  .@md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@container (min-width: 32rem) {
  .@lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@container (min-width: 28rem) {
  .@md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@container (min-width: 32rem) {
  .@lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
```

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

### Nest Container Queries

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

Layer multiple containers to allow descendants to query specific ancestor contexts.

```html
<div class="@container/outer">
  <div class="@lg/outer:bg-blue-100">
    <div class="@container/inner">
      <div class="@lg/inner:text-lg">Content</div>
    </div>
  </div>
</div>
```

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

### Configure Variant Options

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Sets theme values and custom sorting for the container variant.

```typescript
{
  values: theme('containers'),
  sort: customSortFunction,
}
```

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

### Named Container with Type

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Combine container type with a specific name to scope queries.

```html
<div class="@container-[size]/main">
  <!-- Named 'main', queries both dimensions -->
  <div class="@lg/main:text-lg">Content</div>
</div>
```

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

### Run Tailwind Watch Mode

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Use this command to watch for file changes and trigger CSS rebuilds during development.

```bash
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```

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

### Use Arbitrary Container Sizes

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

Define custom container breakpoints directly within the class name.

```html
<div class="@[25rem]:text-lg">   <!-- Custom 25rem breakpoint -->
```

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

### Extend container configuration

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

Add custom container sizes in the tailwind.config.js file.

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

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

### Perform container name comparison

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/sorting-algorithm.md

Level 3 sorting logic using locale-aware string comparison.

```typescript
return aLabel.localeCompare(zLabel, 'en', { numeric: true })
```

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

### Plugin Declaration File Structure

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/module-graph.md

Type definitions for the plugin function and configuration object exported in the declaration file.

```typescript
declare const plugin: (api: {
  matchUtilities: Function
  matchVariant: Function
  theme: Function
}) => void & { config?: object }

export = plugin
```

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

### Define Container Query Input Variants

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/sorting-algorithm.md

A list of container query variants with their associated values and modifiers.

```text
@md:              (value: '28rem', modifier: undefined → '')
@lg:              (value: '32rem', modifier: undefined → '')
@md/sidebar:      (value: '28rem', modifier: 'sidebar')
@md/header:       (value: '28rem', modifier: 'header')
@lg/main:         (value: '32rem', modifier: 'main')
@[400px]:         (value: '400px', modifier: undefined → '')
@[400px]/card:    (value: '400px', modifier: 'card')
@[300px]:         (value: '300px', modifier: undefined → '')
```

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

### Implement Card Component in Svelte

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/integration-guide.md

Uses Svelte slots and Tailwind container classes to create a responsive card component.

```svelte
<!-- Card.svelte -->
<div class="@container p-4 border rounded">
  <div class="@md:p-6">
    <slot />
  </div>
</div>

<!-- Usage -->
<div class="grid grid-cols-3 gap-4">
  <Card>Wide layout</Card>
  <Card>Wide layout</Card>
  <Card>Wide layout</Card>
</div>
```

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

### Extend default container sizes

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

Add new container sizes to the theme.extend.containers object while preserving the default breakpoints.

```javascript
module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',    // 256px - add smaller size
        '8xl': '88rem',    // 1408px - add larger size
        '10xl': '100rem',  // 1600px
      },
    },
  },
  plugins: [require('@tailwindcss/container-queries')],
}
```

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

### Size Container Type

Source: https://github.com/tailwindlabs/tailwindcss-container-queries/blob/main/_autodocs/usage-guide.md

Query based on both width and height dimensions. Note that browser support is more limited than inline-size.

```html
<div class="@container-[size]">
  <!-- Responds to width and height changes -->
  <div class="@lg:text-lg">Content</div>
</div>
```
Tokens:
Raw