Modifiers

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 (
    <button
      className={tw.bg_blue_500
        .hover(tw.bg_blue_600).first_letter(tw.text_red_500.font_bold)
        .text_white.rounded.py_3.px_4.md(tw.py_4.px_5)
        .dark(tw.bg_sky_900.hover(tw.bg_sky_800))}
    >
      Click Me
    </button>
  );
}

<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
</button>

For more reference, checkout the Tailwind docs for Handling Hover, Focus, and Other States (opens in a new tab), Responsive Design (opens in a new tab), and Dark Mode (opens in a new tab).

⚠️

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

Normal Usage Important Modifier