Ngflex2tailwind

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.

Top categories