Explain Command

The explain command helps you understand Tailwind CSS classes and generated output by providing human-readable explanations.

Overview

The explain command breaks down Tailwind utility classes into plain English.

This is useful when:

  • Learning Tailwind CSS
  • Understanding generated output
  • Debugging utility classes
  • Exploring unfamiliar styles

Basic syntax:

BASH
intentcss explain "<classes>"

Example:

BASH
intentcss explain "flex items-center justify-between"

Output:

TEXT
flex
  Enables flexbox layout.

items-center
  Centers items vertically.

justify-between
  Places items at opposite ends of the container.

Why Use Explain?

IntentCSS can generate long utility strings.

Example:

TEXT
fixed inset-0 flex items-center justify-center w-full max-w-lg p-6 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-lg

The explain command helps break this into understandable pieces.

BASH
intentcss explain "fixed inset-0 flex items-center justify-center"

Output:

TEXT
fixed
  Uses fixed positioning.

inset-0
  Stretches the element to all viewport edges.

flex
  Enables flexbox layout.

items-center
  Centers content vertically.

justify-center
  Centers content horizontally.

Basic Examples

Layout

Input:

BASH
intentcss explain "flex flex-col gap-4"

Output:

TEXT
flex
  Enables flexbox.

flex-col
  Stacks children vertically.

gap-4
  Adds spacing between children.

Spacing

Input:

BASH
intentcss explain "p-6 px-8 py-4"

Output:

TEXT
p-6
  Adds padding on all sides.

px-8
  Adds horizontal padding.

py-4
  Adds vertical padding.

Colors

Input:

BASH
intentcss explain "bg-blue-600 text-white"

Output:

TEXT
bg-blue-600
  Applies a blue background color.

text-white
  Sets text color to white.

Effects

Input:

BASH
intentcss explain "shadow-lg rounded-xl"

Output:

TEXT
shadow-lg
  Applies a large shadow.

rounded-xl
  Applies extra-large rounded corners.

Generated Output Example

Generate:

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

Explain:

BASH
intentcss explain "rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700"

Output:

TEXT
rounded-lg
  Applies large rounded corners.

bg-red-600
  Applies a red background.

px-6
  Adds horizontal padding.

py-3
  Adds vertical padding.

text-lg
  Uses a large font size.

text-white
  Sets text color to white.

hover:bg-red-700
  Uses a darker red background on hover.

Multiple Classes

The explain command accepts multiple classes in a single string.

Example:

BASH
intentcss explain "w-full max-w-md mx-auto"

Output:

TEXT
w-full
  Uses the full available width.

max-w-md
  Limits maximum width.

mx-auto
  Centers the element horizontally.

Learning Tailwind

Many developers can use the explain command to learn Tailwind CSS faster.

Example workflow:

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

Then:

BASH
intentcss explain "flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6"

This provides a detailed breakdown of each utility class.

Current Status

The explain command is currently in active development.

Supported explanations include:

  • Layout utilities
  • Flexbox utilities
  • Spacing utilities
  • Sizing utilities
  • Color utilities
  • Border utilities
  • Shadow utilities
  • Typography utilities

Support will continue expanding in future releases.

Future Improvements

Planned enhancements include:

  • CSS explanation support
  • Interactive explanations
  • Visual examples
  • Utility grouping
  • Color previews
  • Component-level explanations

Related Commands

Generate styles:

BASH
intentcss generate --prompt "glass modal"

View help:

BASH
intentcss explain --help

View CLI reference:

BASH
intentcss --help

Next Steps

Continue with:

  • Architecture
  • Testing
  • Contributing
  • Development Guide