Tailwind CSS

There are two ways to use Tailwind CSS with Takumi, you can either bring your bundler compiled stylesheet, or use the native parser.

Bring your Stylesheet

This require you to have Tailwind setup with your bundler or manually compiled to CSS file that browser understands.

Vite Powered Frameworks

Just import your stylesheet with ?inline query and pass it to the stylesheets option of ImageResponse.

import stylesheet from "~/styles/global.css?inline";

export async function loader() {
  return ImageResponse(
    <div className="bg-background text-foreground flex justify-center items-center w-full h-full text-4xl">
      Hello Tailwind!
    </div>,
    {
      width: 1200,
      height: 630,
      stylesheets: [stylesheet],
    },
  );
}

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

Native Parser

Prior Takumi has abaility to parse stylesheets, a built in parser is built for Tailwind CSS.

Generally speaking, this is not recommended as it won't be able to cover all the features of Tailwind CSS, but as a quick solution for simple use cases, it can be a good option.

Limitations

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

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>;