3_quick-start.md

Quick Start

Convert a whole directory

just the files in a directory, it's not recursive

tailwindo path/to/directory/

Recursively convert a whole directory

tailwindo path/to/directory/ --recursive=true

You can also use the short hand -r true instead of the full --recursive=true

Convert different file extensions

This will allow you to upgrade your vue files, twig files, and more!

tailwindo path/to/directory/ --extensions=vue,php,html

You can also use the short hand -e vue,php,html instead of the full --extensions

Overwrite the original files

tailwindo path/to/directory/ --replace=true

Tip Please note this can be considered a destructive action as it will replace the original file and will not leave a copy of the original any where.

Convert one file

By default this will copy the code into a new file like file.html -> file.tw.html

tailwindo file.blade.php

This option works with the --replace=true option too.

Convert raw code (a snippet of code)

just CSS classes:

tailwindo 'alert alert-info'

Or html:

tailwindo '<div class="alert alert-info mb-2 mt-3">hi</div>'

Extract changes to a single CSS file

Extract changes as components to a separate css file (tailwindo-components.css).

tailwindo --components=true  path/to/directory/

For example if you have a file called demo.html and contains:

<div class="alert alert-info mb-2 mt-3">Love is a chemical reaction, soul has nothing to do with it.</div>

and runs:

tailwindo --components=true demo.html

then Tailwindo will not change demo.html and create a CSS file called 'tailwindo-components.css' that contains:

.alert {
	@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-info {
	@apply bg-teal-200 bg-teal-300 bg-teal-800;
}

This will let you keep older markup unchanged and you can just add the new extract components to your main css file.

Supported Frameworks

You can specify what CSS framework your code is written in, by usingframework option in the command line.

Currently we support these frameworks:

• Bootstrap

tailwindo --framework=bootstrap demo.html

---

Prev: < Installation