Pseudo-classes (opens in a new tab) like :hover and :focus, Pseudo-elements (opens in a new tab) like ::before, ::after, ::placeholder and ::selection, Media and feature queries (opens in a new tab) and Attribute Selectors (opens in a new tab) are available as a function.

Typewind also have a dark function which is used to apply styles when the user is in dark mode.

import { tw } from 'typewind';
export default function Button() {
  return (
      Click Me
<button className="bg-blue-500 hover:bg-blue-600 first-letter:text-red-500 first-letter:font-bold text-white rounded py-3 px-4 md:py-5 md:py-5 dark:bg-sky-900 dark:hover:bg-sky-800">
  Click Me

Differences from Tailwind: Because of the way Typewind works, you cannot use tw.2xl() for responsiveness but will have to use tw._2xl().