-
Notifications
You must be signed in to change notification settings - Fork 108
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42 from abdumu/master
add docs
- Loading branch information
Showing
4 changed files
with
156 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)) | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 . | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |