1.0.3 • Published 8 months ago
@ngnomads/ngflex2tailwind v1.0.3
Introduction
As Angular flex layout is deprecated, This tool helps in migrating from flex layout to Tailwind.
Usage
npx @ngnomads/ngflex2tailwindBy Default it Starts executing from Current Directory and Sub Directoroesnpx @ngnomads/ngflex2tailwind -r falseit Starts executing in Current Directory as you Switched off the Recursivenessnpx @ngnomads/ngflex2tailwind -r false -p ./testyou can also specify the folder to migrate
Flexlayout to Tailwind Map
Technically we convert following directives into tailwind utility classes.
| Angular Flexlayout | Tailwind | Native css |
|---|---|---|
| fxLayout="row" | class="flex flex-row" | { display: flex; flex-direction: row;} |
| fxLayout="col" | class="flex flex-col" | { display: flex; flex-direction: row;} |
| fxLayout="row wrap" | class="flex flex-row flex-wrap" | { display: flex; //This is a shorthand for the flex-direction and flex-wrap flex-flow:row wrap;} |
| fxLayoutAlign="center center" | class="justify-center items-center" | { justify-content : center; align-items: center; align-content: center; } |
| fxFlex | class="flex-1_1_0% box-border" | |
| fxFlex="auto" | class="flex-1_1_auto box-border" | |
| fxFlex="10%" | class="flex-1_1_10% box-border" | |
| fxFlex="100%" | class="flex-1_1_100% box-border" | |
| fxFlex="none" | class="flex-1_1_100% box-border max-w-100%" | |
| fxFlex="grow" | class="flex-0_0_auto box-border" | |
| fxFlex="1 1 20rem" | class="flex-1_1_20rem" | |
| fxFlex.md="1 1 50rem" | class="md:flex-1_1_50rem" | |
| fxFlexAlign="start" | class="self-start" | |
| fxFlexAlign="center" | class="self-center" | |
| fxFill | class="min-w-100% w-100% min-h-100% h-100% m-0 " | { margin: 0;height: 100%;width:100%;min-heght:100%;min-width:100%} |
Note: Still this is in beta version, So please expect to have some bugs. Note: This tool doesn't support the flex responsive api yet.