Arbitrary Variants

Tailwind v3.1 released support for Arbitrary Variants (opens in a new tab). You can use the variant() function to work with arbitrary variants, which takes in the variant as the first argument and the Typewind classes as the second.

import { tw } from 'typewind';
 
export default function App() {
  return (
    <ul>
      {Array(5)
        .fill(' ')
        .map((_, i) => (
          <li
            key={i}
            className={
              tw.variant('&:nth-child(3)', tw.underline)
                .list_disc.mx_5.text_white
            }
          >
            Item {i}
          </li>
        ))}
    </ul>
  );
}

Note that here, the modifiers passed in are the exact same as their Tailwind counterparts and do not use the _ syntax typically used by Typewind.

<ul>
  {Array(5)
    .fill(' ')
    .map((_, i) => (
      <li
        key={i}
        className="[&:nth-child(3)]:underline list-disc mx-5 text-white"
      >
        Item {i}
      </li>
    ))}
</ul>

For more reference, checkout the Tailwind Docs for Arbitrary Variants (opens in a new tab).

Arbitrary Values Container Queries