README

`Termwind`

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('Termwind');

// multi-line html...
render(<<<'HTML'
    
        Termwind
        
          Give your CLI apps a unique look
        
    
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('Click me');

`ask()`

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

use function Termwind\{ask};

$answer = ask(<<
    
        What is your name?
    
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:

->width(): Returns the full width of the terminal.
->height(): Returns the full height of the terminal.
->clear(): It clears the terminal screen.

Classes Supported

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

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-['.'].

Responsive Design

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

sm: 64 spaces (640px)
md: 76 spaces (768px)
lg: 102 spaces (1024px)
xl: 128 spaces (1280px)
2xl: 153 spaces (1536px)

render(<<<'HTML'
    
        If bg is blue is sm, if red > than sm breakpoint.
    
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.

The

element can be used as a block type element.

Default Styles: block

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

The

element can be used as a paragraph.

Default Styles: block

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

The element can be used as an inline text container.

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

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

render(<<<'HTML'
    
        This is a CLI app built with Termwind. Click here to open
    
HTML);

and

The and elements can be used to mark the text as bold.

Default Styles: font-bold

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

and

The and elements can be used to mark the text as italic.

Default Styles: italic

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

The ~~element can be used to add a ~~line through~~ the text.~~

Default Styles: line-through

render(<<<'HTML'
This is a CLI app built with ~~Termwind~~.
HTML);

The element can be used to do a line break.

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

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

Default Styles: block, list-disc

render(<<<'HTML'

Item 1

Item 2

HTML);

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

Default Styles: block, list-decimal

render(<<<'HTML'

Item 1

Item 2

HTML);

The
element can be used as a list item. It should only be used as a child of
and
elements.

Default Styles: block, list-decimal

render(<<<'HTML'

Item 1

HTML);

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

Default Styles: block

render(<<<'HTML'

🍃 Termwind

Give your CLI apps a unique look

HTML);

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

Default Styles: block, font-bold

render(<<<'HTML'

🍃 Termwind

HTML);

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

Default Styles: block, ml-4

render(<<<'HTML'

Give your CLI apps a unique look

HTML);

The
element can be used as a horizontal line.

render(<<<'HTML'

🍃 Termwind

Give your CLI apps a unique look

HTML);

The element can have columns and rows. render(<<<'HTML' Task Status Termwind ✓ Done HTML); The element can be used as preformatted text. render(<<<'HTML' Text in a pre element it preserves both spaces and line breaks HTML); The element can be used as code highlighter. It accepts line and start-line attributes. render(<<<'HTML' try { throw new \Exception('Something went wrong'); } catch (\Throwable $e) { report($e); } HTML); Termwind is an open-sourced software licensed under the MIT license.

nunomaduro / termwind

Package info

Security

Fund package maintenance!

Statistics