TailwindAI

Like TailwindCSS, but for AI generation.
className your way to generated content!

React Server ComponentsMock ProviderZero Config

<AI className="ai-$haiku-[code]" as="pre" />

renders

Code review feedback
"Why does this even work here?"
Ship it anyway

Syntax Reference

<AI className="ai-$alias-[text]" /> | <AI className="ai-prompt-[text]" />

ai-$haiku

Haiku generator

ai-$tldr

Summarize text

ai-$eli5

Explain simply

ai-$roast

Funny roast

ai-sentiment

Analyze vibes

ai-delay-{ms}

Mock delay

Live Examples

Each refresh picks a random response from the mock bank

Haiku

Generate a haiku about any topic

<AI className="ai-$haiku-[serverless]" as="pre" />

renders

Fingers on keyboard
Algorithms take their shape
Problems become solved

TLDR

Summarize long text in one snarky sentence

<AI className="ai-$tldr" prompt="React Server Components..." />

renders

React Server Components let you pretend your bloated framework is actually performant by offloading the mess to the server.

ELI5

Explain like I'm 5

<AI className="ai-$eli5-[react_server_components]" />

renders

You know how sometimes your mom prepares your lunch at home before you take it to school? React Server Components are like that. Instead of your browser (the student) having to cook lunch from scratch, the server (your mom) does the cooking first and just sends you the finished meal. Your browser gets less work to do, so everything is faster and easier!

Sentiment

Analyze the vibes

<AI className="ai-sentiment" prompt="I love this!" />

renders

Vibes: neutral zone

Roast

Generate a funny roast

<AI className="ai-$roast-[use_client_everywhere]" />

renders

Spraying 'use client' everywhere is peak "I have a hammer and every problem is a nail" energy. You've got a perfectly good server sitting there, and these devs are out here turning their entire app into a JavaScript beach ball because they forgot what React Server Components were for.

With Delay

Override mock delay for testing loading states

<AI className="ai-$haiku-[bugs] ai-delay-1500" />

renders

Stack overflow crashes
Recursion goes too deep
Functions call themselves

Built-in Suspense

Use the fallback prop for automatic Suspense wrapping

// Instead of wrapping in <Suspense>...

<AI

  className="ai-$haiku-[typescript]"

  fallback={<span>Loading...</span>}

/>

output

Syntax error waits
One semicolon missing
Compiler complains

How to Use

import { AI } from '@tailwind-stack/ai'

// Topic in className (bracket syntax)

<AI className="ai-$haiku-[serverless]" as="pre" />

// Longer text via prompt prop

<AI className="ai-$tldr" prompt="Your long text here..." />

// With built-in Suspense fallback

<AI className="ai-sentiment" prompt="..." fallback={<Spinner />} />

Default Aliases

Built-in prompt prefixes (customizable via config)

Alias	Expands to
`$haiku`	"Write a haiku about: "
`$tldr`	"Summarize in one sentence: "
`$eli5`	"Explain like I'm 5: "
`$roast`	"Write a funny roast of: "