Normal Usage

All the utility classes provided by Tailwind are available in the tw proxy, and can be chained one after another. They can be found in the Tailwind Docs (opens in a new tab).

The hyphens(-) in the tailwind classes is replaced with an underscore(_)

import { tw } from 'typewind';
 
export default function Button() {
  return (
    <button className={tw.bg_blue_500.text_white.rounded.py_3.px_4}>
      Click Me
    </button>
  );
}

<button className="bg-blue-500 text-white rounded py-3 px-4">Click Me</button>

All the utility classes provided by Tailwind are available in the tw proxy. They can be found in the Tailwind Docs (opens in a new tab).

⚠️

Differences from Tailwind

For classes that have decimals or a / in them, for eg. in inset-1/2, use the syntax for arbitrary values, like tw.inset_["1/2"]. Read more about arbitrary values here.
Classes which start with negative values like -mt-1 start with an _ in Typewind. For eg. tw._mt_1.

Color Opacity

You can add an opacity using the Typewind opacity shorthand, as demonstrated in the example.

import { tw } from 'typewind';
 
export default function Button() {
  return (
    <button className={tw.bg_blue_500$["25"].text_white.rounded.py_3.px_4}>
      Click Me
    </button>
  );
}

<button className="bg-blue-500/25 text-white rounded py-3 px-4">Click Me</button>

This works with all the color related classes like text-, bg-, border-, etc. For more information, check out the Tailwind docs for opacity shorthand (opens in a new tab).

Usage Modifiers