Skip to content

Commit

Permalink
Merge pull request #42 from abdumu/master
Browse files Browse the repository at this point in the history
add docs
  • Loading branch information
abdumu authored Feb 3, 2021
2 parents 849d065 + 65fd23e commit df2ce2c
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 0 deletions.
29 changes: 29 additions & 0 deletions docs/1_introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
prev: ./
next: 2_installation
---

# Introduction
Tailwindo can convert Your CSS framework (currently Boostrap) classes in HTML/PHP (any of your choice) files to equivalent Tailwind CSS classes.



## Features
- Convert Bootstrap based files to TailwindCss.
- Multiple files (Recursively) convert.
- Multiple files extensions support (.html, .vue, .twig, .blade and more)
- Safe converting, non-destructive option.
- Can convert a given raw code without file.
- Made to be easy to add more CSS frameworks in the future (currently Bootstrap).
- Can extract changes to a separate css file as Tailwind components and keep old classes names. like:

```
.p-md-5 {
@apply md:p-7;
}
```


::: tip
Check our newest tool, update your tailwindcss code to newer versions hassle-free ([tailwind-shift](https://github.com/awssat/tailwind-shift))
:::
14 changes: 14 additions & 0 deletions docs/2_installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
prev: 1_introduction
next: 2_quick-start
---

# Installation

To get started, use [Composer](https://getcomposer.org/doc/00-intro.md) to install the tool in your system:
```bash
composer global require awssat/tailwindo
```
::: tip
To install this tool make sure that PHP & [Composer](https://getcomposer.org/doc/00-intro.md) (a PHP package manager) are installed on your system .
:::
94 changes: 94 additions & 0 deletions docs/2_quick-start.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
---
prev: 2_installation
next: false
---

# Quick Start

## Convert a whole directory
just the files in a directory, it's not recursive
```bash
tailwindo path/to/directory/
```
## Recursively convert a whole directory
```bash
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!
```bash
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
```bash
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
```bash
tailwindo file.blade.php
```
This option works with the `--replace=true` option too.

## Convert raw code (a snippet of code)
just CSS classes:

```bash
tailwindo 'alert alert-info'
```

Or html:

```bash
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).

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

For example if you have a file called demo.html and contains:
```html
<div class="alert alert-info mb-2 mt-3">Love is a chemical reaction, soul has nothing to do with it.</div>
```

and runs:
```bash
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 using`framework` option in the command line.

#### Currently we support these frameworks:
- Bootstrap


```bash
tailwindo --framework=bootstrap demo.html
```
19 changes: 19 additions & 0 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
prev: false
next: 1_introduction
---

# Tailwindo

<p align="center">
<img src="https://pbs.twimg.com/media/DQ-mDgSX0AUpCPL.png">
</p>


### Contributing

Please see [the package github repo](https://github.com/awssat/tailwindo) for details.

### License

The MIT License (MIT).

0 comments on commit df2ce2c

Please sign in to comment.