All posts
Published in PHP

Style your CLI applications with Termwind

Profile image of Atakan Demircioğlu
By Atakan Demircioğlu
Fullstack Developer
Style your CLI applications with Termwind image 1

 

Termwind is like Tailwind CSS, it is for styling your PHP CLI applications.

Getting started with Termwind

Termwind enables developers to seamlessly integrate Tailwind-like CSS classes directly into their PHP code, facilitating stylish CLI outputs.

To get started with using Termwind run the following command;

composer require nunomaduro/termwind

After that create a cli.php file

<?php

require 'vendor/autoload.php';

use function Termwind\{render};

render(<<<'HTML'
    <div>
        <div class="px-4 text-red-800 bg-white uppercase">Termwind</div>
        <em class="ml-2">
          Give your CLI apps a unique look
        </em>
    </div>
HTML);

This will give us an output like this;

Style your CLI applications with Termwind image 2

ask() Method Usage

You can utilize the ask() function to present a question to the user. The return provided by this method will be the answer.

<?php

require 'vendor/autoload.php';

use function Termwind\{render};
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);

render(<<<HTML
    <span class="mt-1 ml-2 mr-1 bg-green px-1 text-black">
        Hello, $answer!
    </span>
HTML);

The output will be like this;

Style your CLI applications with Termwind image 3

Add Custom Style With style() Method

The style() function allows users to incorporate custom styles and modify colors as needed.

In this example, we are creating a custom my-btn class.

<?php

require 'vendor/autoload.php';

use function Termwind\{render};
use function Termwind\{style};

style('my-btn')->apply('bg-blue', 'text-black');

render(<<<HTML
    <button class="my-btn p-8">
        Click me
    </button>
HTML);

The output will be like this;

Style your CLI applications with Termwind image 4

References;