1. Presets
  2. Container Queries

Presets

@twind/preset-container-queries

MIT License Latest Release Github

A preset that provides utilities for container queries.

🤝 Compatibility

@twind/preset-container-queries@tailwindcss/container-queries
>=1.0.0 <1.1.00.1.0

📦 Installation

with @twind/core

Install from npm:

sh
npm install @twind/core @twind/preset-container-queries

Add the preset to your twind config:

twind.config.js
js
import { defineConfig } from '@twind/core'
import presetContainerQueries from '@twind/preset-container-queries'

export default defineConfig({
  presets: [presetContainerQueries()],
  /* config */
})
Usage with a script tag
html
<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-container-queries@1"
    crossorigin
  ></script>
  <script>
    twind.install({
      presets: [twind.presetContainerQueries()],
      /* config */
    })
  </script>
</head>

with Twind CDN

html
<head>
  <script src="https://cdn.twind.style/container-queries" crossorigin></script>
  <script>
    twind.install({
      presets: [twind.presetContainerQueries()],
      /* config */
    })
  </script>
</head>

🙇 Usage

Same as with @tailwindcss/container-queries › Usage

🔧 Theme

A containers section is added to the theme with the same values as @tailwindcss/container-queries › Configuration.