search

nunomaduro / termwind

🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.
MIT License
2.27k stars 76 forks source link
console css php tailwind

readme

Termwind logo

Termwind

Termwind example

GitHub Workflow Status (master) Total Downloads Latest Version License

Termwind allows you to build unique and beautiful PHP command-line applications, using the Tailwind CSS API. In short, it's like Tailwind CSS, but for the PHP command-line applications.

Installation

Requires PHP 8.0+

Require Termwind using Composer:

composer require nunomaduro/termwind

Usage

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);

// Laravel or Symfony console commands...
class UsersCommand extends Command
{
    public function handle()
    {
        render(
            view('users.index', [
                'users' => User::all()
            ])
        );
    }
}

style()

The style() function may be used to add own custom styles and also update colors.

use function Termwind\{style};

style('green-300')->color('#bada55');
style('btn')->apply('p-4 bg-green-300 text-white');

render('<div class="btn">Click me</div>');

ask()

The ask() function may be used to prompt the user with a question.

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);

The return provided from the ask method will be the answer provided from the user.

terminal()

The terminal() function returns an instance of the Terminal class, with the following methods:

Classes Supported

All the classes supported use exactly the same logic that is available on tailwindcss.com/docs.

Responsive Design

Like TailwindCSS we also support Responsive Design media queries and this are the breakpoints supported:

render(<<<'HTML'
    <div class="bg-blue-500 sm:bg-red-600">
        If bg is blue is sm, if red > than sm breakpoint.
    </div>
HTML);

All the sizes for the CLI are based on Font Size 15.

HTML Elements Supported

All the elements have the capability to use the class attribute.

<div>

The <div> element can be used as a block type element.

Default Styles: block

render(<<<'HTML'
    <div>This is a div element.</div>
HTML);

<p>

The <p> element can be used as a paragraph.

Default Styles: block

render(<<<'HTML'
    <p>This is a paragraph.</p>
HTML);

<span>

The <span> element can be used as an inline text container.

render(<<<'HTML'
    <p>
        This is a CLI app built with <span class="text-green-300">Termwind</span>.
    </p>
HTML);

<a>

The <a> element can be used as a hyperlink. It allows to use the href attribute to open the link when clicked.

render(<<<'HTML'
    <p>
        This is a CLI app built with Termwind. <a href="https://github.com/nunomaduro/termwind/blob/2.x/">Click here to open</a>
    </p>
HTML);

<b> and <strong>

The <b>and <strong> elements can be used to mark the text as bold.

Default Styles: font-bold

render(<<<'HTML'
    <p>
        This is a CLI app built with <b>Termwind</b>.
    </p>
HTML);

<i> and <em>

The <i> and <em> elements can be used to mark the text as italic.

Default Styles: italic

render(<<<'HTML'
    <p>
        This is a CLI app built with <i>Termwind</i>.
    </p>
HTML);

<s>

The <s> element can be used to add a line through the text.

Default Styles: line-through

render(<<<'HTML'
    <p>
        This is a CLI app built with <s>Termwind</s>.
    </p>
HTML);

<br>

The <br> element can be used to do a line break.

render(<<<'HTML'
    <p>
        This is a CLI <br>
        app built with Termwind.
    </p>
HTML);

<ul>

The <ul> element can be used for an unordered list. It can only accept <li> elements as childs, if there is another element provided it will throw an InvalidChild exception.

Default Styles: block, list-disc

render(<<<'HTML'
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
HTML);

<ol>

The <ol> element can be used for an ordered list. It can only accept <li> elements as childs, if there is another element provided it will throw an InvalidChild exception.

Default Styles: block, list-decimal

render(<<<'HTML'
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
HTML);

<li>

The <li> element can be used as a list item. It should only be used as a child of <ul> and <ol> elements.

Default Styles: block, list-decimal

render(<<<'HTML'
    <ul>
        <li>Item 1</li>
    </ul>
HTML);

<dl>

The <dl> element can be used for a description list. It can only accept <dt> or <dd> elements as childs, if there is another element provided it will throw an InvalidChild exception.

Default Styles: block

render(<<<'HTML'
    <dl>
        <dt>🍃 Termwind</dt>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

<dt>

The <dt> element can be used as a description title. It should only be used as a child of <dl> elements.

Default Styles: block, font-bold

render(<<<'HTML'
    <dl>
        <dt>🍃 Termwind</dt>
    </dl>
HTML);

<dd>

The <dd> element can be used as a description title. It should only be used as a child of <dl> elements.

Default Styles: block, ml-4

render(<<<'HTML'
    <dl>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

<hr>

The <hr> element can be used as a horizontal line.

render(<<<'HTML'
    <div>
        <div>🍃 Termwind</div>
        <hr>
        <p>Give your CLI apps a unique look</p>
    </div>
HTML);

<table>

The <table> element can have columns and rows.

render(<<<'HTML'
    <table>
        <thead>
            <tr>
                <th>Task</th>
                <th>Status</th>
            </tr>
        </thead>
        <tr>
            <th>Termwind</th>
            <td>✓ Done</td>
        </tr>
    </table>
HTML);

<pre>

The <pre> element can be used as preformatted text.

render(<<<'HTML'
    <pre>
        Text in a pre element
        it preserves
        both      spaces and
        line breaks
    </pre>
HTML);

<code>

The <code> element can be used as code highlighter. It accepts line and start-line attributes.

render(<<<'HTML'
    <code line="22" start-line="20">
        try {
            throw new \Exception('Something went wrong');
        } catch (\Throwable $e) {
            report($e);
        }
    </code>
HTML);

Termwind is an open-sourced software licensed under the MIT license.