DOCSEARCHbyAlgolia
Submit Docs

Termwind Documentation

repository·2.x·Indexed 25 days ago

https://github.com/nunomaduro/termwind

A PHP 8.0+ library for building command-line applications using Tailwind CSS API. It translates HTML-like syntax and Tailwind classes into terminal styling, featuring functions for rendering HTML, defining custom styles, prompting users, and accessing terminal properties.

Tokens
1.3K
Snippets
4
Records
8
Agent score
32%

What's inside Termwind

  1. Use responsive design breakpoints

    2.x

    Termwind supports responsive design breakpoints similar to Tailwind CSS. All sizes are based on Font Size 15. The supported breakpoints are:

    • sm: 64 spaces (640px)
    • md: 76 spaces (768px)
    • lg: 102 spaces (1024px)
    • xl: 128 spaces (1280px)
    • 2xl: 153 spaces (1536px)
    render(<<<'HTML'
    <div class="bg-blue-500 sm:bg-red-600">
        If bg is blue is sm, if red > than sm breakpoint.
    </div
HTML);

  4. Prompt the user with `ask()`

    2.x

    The ask() function prompts the user with a question styled with HTML. The function returns the string provided by the user as the answer.

    use function Termwind\{ask};

$answer = ask(<<<HTML
    <span class="mt-1 ml-2 mr-1 bg-green px-1 text-black">
        What is your name?
    </span>
HTML);

  5. Render HTML in the terminal with `render()`

    2.x

    The render() function allows you to output HTML-like strings to the terminal using Tailwind CSS classes for styling. You can use single-line strings or multi-line heredoc syntax.

    use function Termwind\{render};

// single line html...
render('<div class="px-1 bg-green-300">Termwind</div');

// multi-line html...
render(<<<'HTML'
    <div>
        <div class="px-1 bg-green-600">Termwind</div>
        <em class="ml-1">
          Give your CLI apps a unique look
        </em>
    </div>
HTML);

  6. Access terminal properties with `terminal()`

    2.x

    The terminal() function returns an instance of the Terminal class, which provides methods to interact with the terminal environment:

    • ->width(): Returns the full width of the terminal.
    • ->height(): Returns the full height of the terminal.
    • ->clear(): Clears the terminal screen.

  7. Supported Tailwind CSS classes

    2.x

    Termwind supports a wide range of Tailwind CSS classes following the standard Tailwind logic. Supported categories include:

    • Background Color: bg-{color}-{variant}
    • Text Color: text-{color}-{variant}
    • Font Weight: font-bold, font-normal
    • Font Style: italic
    • Text Decoration: underline, line-through
    • Text Transform: uppercase, lowercase, capitalize, snakecase
    • Text Overflow: truncate
    • Text Alignment: text-left, text-center, text-right
    • Margin: m-{margin}, ml-{leftMargin}, mr-{rightMargin}, mt-{topMargin}, mb-{bottomMargin}, mx-{horizontalMargin}, my-{verticalMargin}
    • Padding: p-{padding}, pl-{leftPadding}, pr-{rightPadding}, pt-{topPadding}, pb-{bottomPadding}, px-{horizontalPadding}, py-{verticalPadding}
    • Space: space-y-{space}, space-x-{space}
    • Width: w-{width}, w-full, w-auto
    • Min Width: min-w-{width}
    • Max Width: max-w-{width}
    • Justify Content: justify-between, justify-around, justify-evenly, justify-center
    • Visibility: invisible
    • Display: block, flex, hidden
    • Flex: flex-1
    • List Style: list-disc, list-decimal, list-square, list-none
    • Content: content-repeat-['.']

  8. Supported HTML elements and default styles

    2.x

    Termwind supports several HTML elements, all of which can use the class attribute. Many elements come with default styles:

    • <div>: Block element. Default: block.
    • <p>: Paragraph. Default: block.
    • <span>: Inline text container.
    • <a>: Hyperlink. Supports href attribute to open links.
    • <b> and <strong>: Bold text. Default: font-bold.
    • <i> and <em>: Italic text. Default: italic.
    • <s>: Strikethrough. Default: line-through.
    • <br>: Line break.
    • <ul>: Unordered list. Default: block, list-disc. Accepts only <li> children.
    • <ol>: Ordered list. Default: block, list-decimal. Accepts only <li> children.
    • <li>: List item. Should be a child of <ul> or <ol>.
    • <dl>: Description list. Accepts only <dt> or <dd> children. Default: block.
    • <dt>: Description title. Should be a child of <dl>. Default: block, font-bold.
    • <dd>: Description detail. Should be a child of <dl>. Default: block, ml-4.
    • <hr>: Horizontal line.
    • <table>: Table with rows and columns.
    • <pre>: Preformatted text (preserves spaces and line breaks).
    • <code>: Code highlighter. Supports line and start-line attributes.