Tailwind Output

Tailwind Output is the default generation target in IntentCSS. It produces utility classes that can be pasted directly into Tailwind CSS projects.

Overview

When no output target is specified, IntentCSS generates Tailwind CSS classes.

Example:

BASH
intentcss generate --prompt "blue button"

Output:

TEXT
rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700

This output can be pasted directly into a Tailwind project.

HTML
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
    Click Me
</button>

Default Target

These commands are equivalent:

BASH
intentcss generate --prompt "red button"
BASH
intentcss generate --prompt "red button" --target tailwind

Tailwind is the default target used by IntentCSS.

Component Generation

Button

Prompt:

BASH
intentcss generate --prompt "large red button"

Output:

TEXT
rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700

Card

Prompt:

BASH
intentcss generate --prompt "shadow card"

Output:

TEXT
rounded-xl bg-white p-6 shadow-lg

Form

Prompt:

BASH
intentcss generate --prompt "glass login form"

Output:

TEXT
flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6 space-y-2

Navbar

Prompt:

BASH
intentcss generate --prompt "dark navbar"

Output:

TEXT
flex items-center justify-between p-4 bg-gray-900 text-white border-b border-gray-800

Sidebar

Prompt:

BASH
intentcss generate --prompt "glass rounded sidebar"

Output:

TEXT
w-64 min-h-screen backdrop-blur-md bg-white/30 border border-white/20 rounded-2xl shadow-lg

Hero

Prompt:

BASH
intentcss generate --prompt "dark large hero"

Output:

TEXT
text-center py-32 px-12 bg-gray-900 text-white

Footer

Prompt:

BASH
intentcss generate --prompt "large blue footer"

Output:

TEXT
p-10 bg-blue-600 text-white

Modifiers

IntentCSS supports modifiers that alter generated output.

Colors

Supported colors:

  • Blue
  • Red
  • Green
  • Purple
  • Black
  • White

Example:

BASH
intentcss generate --prompt "green button"

Output:

TEXT
bg-green-600 hover:bg-green-700

Sizes

Example:

BASH
intentcss generate --prompt "large button"

Output:

TEXT
px-6 py-3 text-lg

Glass

Example:

BASH
intentcss generate --prompt "glass modal"

Output:

TEXT
backdrop-blur-md bg-white/30 border border-white/20

Shadow

Example:

BASH
intentcss generate --prompt "shadow card"

Output:

TEXT
shadow-lg

Rounded

Example:

BASH
intentcss generate --prompt "rounded hero"

Output:

TEXT
rounded-3xl

Centered

Example:

BASH
intentcss generate --prompt "centered login form"

Output:

TEXT
mx-auto

Responsive

Example:

BASH
intentcss generate --prompt "responsive form"

Output:

TEXT
w-full max-w-md

Combining Modifiers

Multiple modifiers can be combined.

Prompt:

BASH
intentcss generate --prompt "glass shadow rounded sidebar"

Output:

TEXT
w-64 min-h-screen backdrop-blur-md bg-white/30 border border-white/20 rounded-2xl shadow-lg

Why Tailwind?

Tailwind CSS is the primary target for IntentCSS because:

  • Utility-first workflow
  • Predictable generation
  • Fast prototyping
  • Easy copy and paste
  • No generated stylesheets required

IntentCSS focuses on generating readable and maintainable utility classes rather than large blocks of CSS.

Next Steps

Continue with:

  • CSS Output
  • Supported Intents
  • Modifiers
  • CLI Reference