Presets
A preset that provides utilities for container queries.
- 🤖 Try the playground
- 🧭 Explore the examples
- 📓 Consult the API reference
- 📜 Read the changelog
Note
Based on @tailwindcss/container-queries.
🤝 Compatibility
@twind/preset-container-queries | @tailwindcss/container-queries |
---|---|
>=1.0.0 <1.1.0 | 0.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:
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.