# flex-layout-to-tailwind > CLI that migrates @angular/flex-layout to tailwindcss Latest version **1.0.0-rc.1** (published 2024-04-12) · MIT license · 0 weekly downloads ## Install ```sh npm install flex-layout-to-tailwind pnpm add flex-layout-to-tailwind yarn add flex-layout-to-tailwind bun add flex-layout-to-tailwind ``` Provides the command `fltt`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-rc.1 | | Published | 2024-04-12 | | First published | 2023-10-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 11 | | Unpacked size | 191.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | synopss | | Maintainers | tpostaire | | Keywords | angular, flex, tailwindcss, tailwind, migrate, migration | ## Links - npm: https://www.npmjs.com/package/flex-layout-to-tailwind - Repository: https://github.com/synopss/flex-layout-to-tailwind - Homepage: https://github.com/synopss/flex-layout-to-tailwind#readme - Issues: https://github.com/synopss/flex-layout-to-tailwind/issues - npm.io page: https://npm.io/package/flex-layout-to-tailwind ## Dependencies (11) - [chalk](https://npm.io/package/chalk.md) ^4.1.2 - [ignore](https://npm.io/package/ignore.md) ^5.2.4 - [semver](https://npm.io/package/semver.md) ^7.5.4 - [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.12 - [fs-extra](https://npm.io/package/fs-extra.md) ^11.0.1 - [commander](https://npm.io/package/commander.md) ^11.0.0 - [classnames](https://npm.io/package/classnames.md) ^2.3.2 - [nanospinner](https://npm.io/package/nanospinner.md) ^1.1.0 - [jsonc-parser](https://npm.io/package/jsonc-parser.md) ^3.2.0 - [@inquirer/prompts](https://npm.io/package/@inquirer/prompts.md) ^3.0.2 - [lines-and-columns](https://npm.io/package/lines-and-columns.md) ^2.0.3 ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads - [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads ## Recent versions - 1.0.0-rc.1 (latest) — 2024-04-12 - 1.0.0-rc.0 — 2023-10-01 ## README # 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. **:construction: This project is still under development. Use it at your own risks. :construction:** ## Installation Install the package globally using npm: ```bash npm i -g flex-layout-to-tailwind ``` ## Usage You can use the CLI using: ```bash fltt ``` Or you can directly provide the input of your project as an option: ```bash fltt --input ./path/to/your/project ``` You can also add debug option: ```bash 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): ```bash 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 | :white_check_mark: | :white_check_mark: | | fxLayoutAlign | :white_check_mark: | :white_check_mark: | | fxLayoutGap | :white_check_mark: | :white_check_mark: | | gdAlignColumns | :x: | :x: | | gdAlignRows | :x: | :x: | | gdAreas | :x: | :x: | | gdAuto | :x: | :x: | | gdColumns | :x: | :x: | | gdGap | :x: | :x: | | gdGridAlign | :x: | :x: | | gdRows | :x: | :x: | ### API for DOM elements | Flex-Layout Attribute | Static API | Responsive API | |--------------------------|--------------------|--------------------| | fxFlex, fxGrow, fxShrink | :white_check_mark: | :white_check_mark: | | fxFlexOrder | :white_check_mark: | :white_check_mark: | | fxFlexOffset | :white_check_mark: | :white_check_mark: | | fxFlexAlign | :white_check_mark: | :white_check_mark: | | fxFlexFill, fxFill | :white_check_mark: | No API | | gdArea | :x: | :x: | | gdColumn | :x: | :x: | | gdRow | :x: | :x: | | gdGridAlign | :x: | :x: | ### API for any element | Flex-Layout Attribute | Static API | Responsive API | |-----------------------|--------------------|--------------------| | fxHide | :white_check_mark: | :white_check_mark: | | fxShow | :white_check_mark: | :white_check_mark: | | ngClass | :x: | :x: | | ngStyle | :x: | :x: | | imgSrc | :x: | :x: | ## Contributing Want to report a bug or contribute some code? Amazing! Please read up on our guidelines for [contributing](https://github.com/synopss/migrate-angular-flex-to-tailwind/blob/main/CONTRIBUTING.md). ## Code of Conduct Please read and follow our [Code of Conduct](https://github.com/synopss/migrate-angular-flex-to-tailwind/blob/main/CODE_OF_CONDUCT.md). ## License This project is licensed under the MIT License. --- _Source: https://npm.io/package/flex-layout-to-tailwind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._