Container Queries

Container Queries (opens in a new tab) is a plugin for Tailwind v3.2+ that provides utilities for container queries (opens in a new tab). Tailwind decided to use a new @ syntax to differentiate it from media queries. In Typewind, just replace the @ with $ and you should be good to go!

import { tw } from 'typewind';
 
export default function App() {
  return (
    <div className={tw.$container}>
      <div className={tw.$lg(tw.underline)}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non.
      </div>
    </div>
  );
}

<div className="@container">
  <div className="@lg:underline">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non.
  </div>
</div>

For any other plugin which uses @ in the classes, use $ instead.

⚠️

Typewind does not support named container queries yet. If you would like to contribute, feel free to start a discussion on Github (opens in a new tab).

Arbitrary Variants Babel