Introduction

As Angular flex layout is deprecated, This tool helps in migrating from flex layout to Tailwind.

Usage

• npx @ngnomads/ngflex2tailwind By Default it Starts executing from Current Directory and Sub Directoroes
• npx @ngnomads/ngflex2tailwind -r false it Starts executing in Current Directory as you Switched off the Recursiveness
• npx @ngnomads/ngflex2tailwind -r false -p ./test you 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%}

Limitations

There are some limitations in this tool, especially with html elements with self closing tags like img, hr, br, input etc.

Examples from the use cases were

</input>
</img>
=""

flex-[1_1_0 0 40px]
flex-[0_0_40px]

flex-[1_1_0 0 5px]
flex-[0_0_5px]

flex-[1_1_1 1 100%]
flex-[1_1_100%]

flex-[1_1_1 1 5%]
flex-[1_1_5%]

flex-[1_1_1 1 95%]
flex-[1_1_95%]


'flex flex-row': layout === 'row',
'flex flex-col': layout === 'column',

ngClass]="[
      placeholder ? 'gap-[0.5rem]' : 'gap-[0]',
      layout === 'row' && 'flex flex-row',
      layout === 'col' && 'flex flex-col',
    ]"

fxFlex="start center" => flex-auto
class="flex-[1_1_start%] box-border">

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.