PHPackages                             nunomaduro/tailcli - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [CLI & Console](/categories/cli)
4. /
5. nunomaduro/tailcli

Abandoned → [https://github.com/nunomaduro/termwind](/?search=https%3A%2F%2Fgithub.com%2Fnunomaduro%2Ftermwind)Library[CLI & Console](/categories/cli)

nunomaduro/tailcli
==================

It's like Tailwind CSS, but for the console.

v2.4.0(2mo ago)2.5k2090[5 issues](https://github.com/nunomaduro/termwind/issues)[5 PRs](https://github.com/nunomaduro/termwind/pulls)MITPHPPHP ^8.2CI passing

Since Nov 28Pushed 2mo ago18 watchersCompare

[ Source](https://github.com/nunomaduro/termwind)[ Packagist](https://packagist.org/packages/nunomaduro/tailcli)[ Fund](https://www.paypal.com/paypalme/enunomaduro)[ GitHub Sponsors](https://github.com/nunomaduro)[ RSS](/packages/nunomaduro-tailcli/feed)WikiDiscussions 2.x Synced 1mo ago

READMEChangelog (10)DependenciesVersions (41)Used By (0)

 [![Termwind logo](/art/logo.png)](/art/logo.png)

 `Termwind`

===============

[](#----termwind--------)

 [![Termwind example](https://raw.githubusercontent.com/nunomaduro/tailcli/master/art/example.png)](https://raw.githubusercontent.com/nunomaduro/tailcli/master/art/example.png)

 [![GitHub Workflow Status (master)](https://camo.githubusercontent.com/1f94c9ee835f0d5186de3f197a0fda168b237174e609abf2c272ee137957ae0d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6e756e6f6d616475726f2f7465726d77696e642f74657374732e796d6c)](https://github.com/nunomaduro/termwind/actions) [![Total Downloads](https://camo.githubusercontent.com/e94750a0ecbc1d4d9d7aab783c931c695f37ff7f03b555807d978b64d2fa6bf2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6e756e6f6d616475726f2f7465726d77696e64)](https://packagist.org/packages/nunomaduro/termwind) [![Latest Version](https://camo.githubusercontent.com/ca1d31bfad933c5d3f34b5a5e802ce4c1ec27b43a60d03eac6d620a0a1fa0eef/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e756e6f6d616475726f2f7465726d77696e64)](https://packagist.org/packages/nunomaduro/termwind) [![License](https://camo.githubusercontent.com/e494a41a4ce331d21e6882d0fa3bb30c6f1cc5f43ff040d61bd27bc1c3de5304/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6e756e6f6d616475726f2f7465726d77696e64)](https://packagist.org/packages/nunomaduro/termwind)

---

**Termwind** allows you to build unique and beautiful PHP command-line applications, using the **[Tailwind CSS](https://tailwindcss.com/)** API. In short, it's like Tailwind CSS, but for the PHP command-line applications.

Installation
------------

[](#installation)

> **Requires [PHP 8.0+](https://php.net/releases/)**

Require Termwind using [Composer](https://getcomposer.org):

```
composer require nunomaduro/termwind
```

Usage
-----

[](#usage)

```
use function Termwind\{render};

// single line html...
render('Termwind');

// multi-line html...
render( User::all()
            ])
        );
    }
}
```

### `style()`

[](#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()`

[](#ask)

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

```
use function Termwind\{ask};

$answer = ask(clear()`: It clears the terminal screen.

Classes Supported
-----------------

[](#classes-supported)

All the classes supported use exactly the same logic that is available on [tailwindcss.com/docs](https://tailwindcss.com/docs).

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

Responsive Design
-----------------

[](#responsive-design)

Like TailwindCSS we also support [Responsive Design](https://tailwindcss.com/docs/responsive-design#customizing-breakpoints) 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(