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. 🚧
Install the package globally using npm:
npm i -g flex-layout-to-tailwindYou can use the CLI using:
flttOr you can directly provide the input of your project as an option:
fltt --input ./path/to/your/projectYou can also add debug option:
fltt --input ./path/to/your/project --debugYou can also install dependencies by force if dependencies are not matching (by default this flag is false):
fltt --input ./path/to/your/project --forceInstallDependenciesFlex-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.
| Flex-Layout Attribute | Static API | Responsive API |
|---|---|---|
| fxLayout | ✅ | ✅ |
| fxLayoutAlign | ✅ | ✅ |
| fxLayoutGap | ✅ | ✅ |
| gdAlignColumns | ❌ | ❌ |
| gdAlignRows | ❌ | ❌ |
| gdAreas | ❌ | ❌ |
| gdAuto | ❌ | ❌ |
| gdColumns | ❌ | ❌ |
| gdGap | ❌ | ❌ |
| gdGridAlign | ❌ | ❌ |
| gdRows | ❌ | ❌ |
| Flex-Layout Attribute | Static API | Responsive API |
|---|---|---|
| fxFlex, fxGrow, fxShrink | ✅ | ✅ |
| fxFlexOrder | ✅ | ✅ |
| fxFlexOffset | ✅ | ✅ |
| fxFlexAlign | ✅ | ✅ |
| fxFlexFill, fxFill | ✅ | No API |
| gdArea | ❌ | ❌ |
| gdColumn | ❌ | ❌ |
| gdRow | ❌ | ❌ |
| gdGridAlign | ❌ | ❌ |
| Flex-Layout Attribute | Static API | Responsive API |
|---|---|---|
| fxHide | ✅ | ✅ |
| fxShow | ✅ | ✅ |
| ngClass | ❌ | ❌ |
| ngStyle | ❌ | ❌ |
| imgSrc | ❌ | ❌ |
Want to report a bug or contribute some code? Amazing! Please read up on our guidelines for contributing.
Please read and follow our Code of Conduct.
This project is licensed under the MIT License.