CSS Output

CSS Output allows IntentCSS to generate traditional CSS instead of Tailwind utility classes.

Overview

While Tailwind CSS is the default generation target, IntentCSS can also generate plain CSS.

This is useful for:

  • Traditional websites
  • CSS-only projects
  • Legacy applications
  • Frameworks that do not use Tailwind

To generate CSS, specify the CSS target:

BASH
intentcss generate --prompt "blue button" --target css

Basic Example

Prompt:

BASH
intentcss generate --prompt "blue button" --target css

Output:

CSS
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #1d4ed8;
}

Why Use CSS Output?

CSS output is useful when:

  • Tailwind is unavailable
  • Existing stylesheets are preferred
  • Teams use traditional CSS workflows
  • Utility classes are not desired

IntentCSS uses the same intent engine regardless of output target.

Only the final renderer changes.

Using CSS Output

Button

Prompt:

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

Output:

CSS
.button {
  background-color: #dc2626;
}

.button:hover {
  background-color: #b91c1c;
}

Card

Prompt:

BASH
intentcss generate --prompt "card" --target css

Output:

CSS
.card {
  background-color: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1);
}

Form

Prompt:

BASH
intentcss generate --prompt "login form" --target css

Output:

CSS
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: 100%;
  max-width: 28rem;

  padding: 1.5rem;
  border-radius: 0.75rem;

  background-color: white;
}

Navbar

Prompt:

BASH
intentcss generate --prompt "navbar" --target css

Output:

CSS
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1rem 1.5rem;

  background-color: white;

  border-bottom:
    1px solid #e5e7eb;
}

Modal

Prompt:

BASH
intentcss generate --prompt "modal" --target css

Output:

CSS
.modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: white;
}

Sidebar

Prompt:

BASH
intentcss generate --prompt "sidebar" --target css

Output:

CSS
.sidebar {
  width: 16rem;
  min-height: 100vh;

  background-color: #f4f4f5;
}

Hero

Prompt:

BASH
intentcss generate --prompt "hero" --target css

Output:

CSS
.hero {
  text-align: center;

  padding: 5rem 2rem;

  background-color: white;
}

Footer

Prompt:

BASH
intentcss generate --prompt "footer" --target css

Output:

CSS
.footer {
  padding: 2rem;

  background-color: white;

  border-top:
    1px solid #e5e7eb;
}

Supported Colors

IntentCSS currently supports CSS generation for:

ColorBase
Blue#2563eb
Red#dc2626
Green#16a34a
Purple#9333ea
Black#000000

Each color automatically generates hover states where applicable.

CSS vs Tailwind

FeatureCSSTailwind
Utility Classes❌✅
Standalone Stylesheet✅❌
Framework Required❌✅
Generated Selectors✅❌
Default Target❌✅

Example Comparison

Prompt:

BASH
intentcss generate --prompt "large red button"

Tailwind:

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

CSS:

CSS
.button {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;

  background-color: #dc2626;

  color: white;
}

Choosing a Target

Use Tailwind when:

  • Building modern frontend applications
  • Using React, Next.js, Vue, or Svelte
  • Rapid prototyping is important

Use CSS when:

  • Maintaining traditional projects
  • Working without Tailwind
  • Generating reusable stylesheets

Next Steps

Continue with:

  • Supported Intents
  • Modifiers
  • CLI Reference
  • Generate Command