Tailwind CSS

Takumi includes a built-in Tailwind CSS parser that allows you to style your components using familiar utility classes. This provides a productive developer experience similar to modern web development.

Usage

You can use the tw prop on any element (div, span, img, etc.) in your JSX.

<div tw="bg-blue-500 p-4 rounded-lg">
  <h1 tw="text-white text-2xl font-bold">Hello Tailwind!</h1>
</div>

Dynamic Classes

Since tw is just a prop, you can use template literals or conditional logic to apply classes dynamically.

import clsx from "clsx";

const isError = true;

<div
  tw={clsx(
    "p-4 rounded",
    isError ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700",
  )}
>
  {isError ? "Something went wrong" : "Success!"}
</div>

Limitations

• No important flag.
• No custom theme config, but arbitrary values are supported.
• Read the parser mapping for all supported classes.