From 65fd23e879080226f728a259ccae40a6cde715e6 Mon Sep 17 00:00:00 2001
From: Abdulrahman <saanina@gmail.com>
Date: Wed, 3 Feb 2021 04:20:16 +0300
Subject: [PATCH] add docs

---
 docs/1_introduction.md | 29 +++++++++++++
 docs/2_installation.md | 14 +++++++
 docs/2_quick-start.md  | 94 ++++++++++++++++++++++++++++++++++++++++++
 docs/index.md          | 19 +++++++++
 4 files changed, 156 insertions(+)
 create mode 100644 docs/1_introduction.md
 create mode 100644 docs/2_installation.md
 create mode 100644 docs/2_quick-start.md
 create mode 100644 docs/index.md

diff --git a/docs/1_introduction.md b/docs/1_introduction.md
new file mode 100644
index 0000000..347505a
--- /dev/null
+++ b/docs/1_introduction.md
@@ -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))
+:::
diff --git a/docs/2_installation.md b/docs/2_installation.md
new file mode 100644
index 0000000..eb13d4f
--- /dev/null
+++ b/docs/2_installation.md
@@ -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 .
+:::
diff --git a/docs/2_quick-start.md b/docs/2_quick-start.md
new file mode 100644
index 0000000..88fa72f
--- /dev/null
+++ b/docs/2_quick-start.md
@@ -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
+```
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..abc18b1
--- /dev/null
+++ b/docs/index.md
@@ -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).
\ No newline at end of file