FLTT (Flex-Layout to Tailwind)

This CLI helps you to migrate projects from the deprecated Angular Flex-Layout library to tailwindcss utility classes. This package has for goal to cover all cases seen in the Angular Flex-Layout library.

🚧 This project is still under development. Use it at your own risks. 🚧

Installation

Install the package globally using npm:

npm i -g flex-layout-to-tailwind

Usage

You can use the CLI using:

fltt

Or you can directly provide the input of your project as an option:

fltt --input ./path/to/your/project

You can also add debug option:

fltt --input ./path/to/your/project --debug

You can also install dependencies by force if dependencies are not matching (by default this flag is false):

fltt --input ./path/to/your/project --forceInstallDependencies

Status

Flex-Layout has two APIs: a static and a responsive one. The first one is used to handle fixed values, the second one adds breakpoints to handle responsiveness.

This following tables show all attributes covered by the migration from this CLI.

API for DOM containers

Flex-Layout Attribute	Static API	Responsive API
fxLayout	✅	✅
fxLayoutAlign	✅	✅
fxLayoutGap	✅	✅
gdAlignColumns	❌	❌
gdAlignRows	❌	❌
gdAreas	❌	❌
gdAuto	❌	❌
gdColumns	❌	❌
gdGap	❌	❌
gdGridAlign	❌	❌
gdRows	❌	❌

API for DOM elements

Flex-Layout Attribute	Static API	Responsive API
fxFlex, fxGrow, fxShrink	✅	✅
fxFlexOrder	✅	✅
fxFlexOffset	✅	✅
fxFlexAlign	✅	✅
fxFlexFill, fxFill	✅	No API
gdArea	❌	❌
gdColumn	❌	❌
gdRow	❌	❌
gdGridAlign	❌	❌

API for any element

Flex-Layout Attribute	Static API	Responsive API
fxHide	✅	✅
fxShow	✅	✅
ngClass	❌	❌
ngStyle	❌	❌
imgSrc	❌	❌

Contributing

Want to report a bug or contribute some code? Amazing! Please read up on our guidelines for contributing.

Code of Conduct

Please read and follow our Code of Conduct.

License

This project is licensed under the MIT License.