从@Angular/Flex-Layout迁移到Tailwindcss

1. 前言

根据flex-layout官方宣告, @angular/flex-layout当前(2023-06-25)处于deprecated状态. 替代方案为Tailwind或者Angular CDK.

具体原因参考官方的anoucement - Medium post
和github上的讨论

建议新项目使用其他css library, 旧项目考虑移植到其他css library.

以下是我从flex-layout的一些实践.

2. 引入tailwind

3. css class对照表

Angular Flex-Layout directives	Tailwind Equivalent CSS classes
fxLayout=”<direction> <wrap>”	Use flex-<direction> flex-<wrap> classes
fxLayoutAlign=”<main-axis> <cross-axis>”	Use justify-<main-axis> items-<cross-axis> content-<cross-axis> classes
fxLayoutGap=”% | px | vw | vh”	Use gap on flex items
fxFlex=”” | px | % | vw | vh | <grow> | <shrink> <basis>	Use flex, grow, and shrink classes along with customflex-basis classes overriding tailwind config
fxFlexOrder=”int”	Use Order classes along with custom classesoverriding tailwind config
fxFlexOffset=”% | px | vw | vh”	Use Margin classes
fxFlexAlign=”start | baseline | center | end”	Use Align Self classes
fxFlexFill and fxFill	Use w-full and h-full classes
fxShow and fxHide	Use block and hidden classes
Responsive API	Override Tailwind’s default breakpoints to match with Angular Flex-Layout. For example,theme: {extend: {screens: {‘sm’: { ‘min’: ‘600px’, ‘max’: ‘959px’ },‘lt-sm’: { ‘max’: ‘599px’ }….},}} personally I didn’t need to do this.
[ngClass.xs]=”{‘first’:false, ‘third’:true}”	Use aforementioned responsive API class=”gt-xs:first xs:third”
[ngStyle.sm]=”{‘font-size’: ’16px’}”	Use custom CSS classes as mentioned above.
<img src=”a.ico” src.xs=”b.ico”/>	Use custom CSS classes as mentioned above.
gdAreas.xs=”header header | sidebar content”	Tailwind does not have a support forgrid-template-areas so we have to use grid columnsand then apply Grid Row Start/End or Grid Column Start/End classes on grid items.For example, xs:grid-cols-2 xs:grid-rows-2
gdAlignColumns=”<main-axis> <cross-axis>”	Use Align Items and Align Content classes
gdAlignRows=”<main-axis> <cross-axis>”	Use Place Content and Place Items and Place Items classes
gdAuto	Use Grid Auto Flow classes
gdColumns	Use Grid Template Columns classes along with customclasses overriding tailwind config
gdRows	Use Grid Template Rows classes along with customclasses overriding tailwind config
gdGap	Use Gap classes along with custom classesoverriding tailwind config

4. 引入Tailwind依赖包

通过npm安装tailwindcss，然后运行init命令生成tailwind.config.js文件。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

5. 自动转换工具

这里有套自动转换工具https://github.com/NIPE-Solutions/flex-layout-migrator

使用方法:

安装工具

npm install -g @ng-flex/layout-migrator

批量转换文件

fxMigrate ./path/to/your/input/folder --output ./path/to/your/output/folder

单个文件转换

fxMigrate ./path/to/your/input/file.html --output ./path/to/your/output/file.html

6. 罗列出系统中使用的所有flex-layout特性

如果需要手动迁移可以参考以下实际案例

Angular Flex-Layout	tailwind equivalent	comments
fxLayout=”column”	class=”flex flex-col”
fxLayout=”column” fxLayoutAlign=”start center”	class=”flex flex-col justify-start items-center”
fxLayout=”row”	class=”flex flex-row”
fxFlex=”100”	class=”w-full” or class=”h-full”	it’s w-full or h-full depends on the container is flex-col or flex-row
fxLayoutGap=”8px”	class=”gap-2”
fxLayout=”row wrap” fxLayoutAlign=”start center”	class=”flex flex-wrap justify-start items-center”
fxFlex.xs=”100” fxFlex.sm=”50” fxFlex.md=”33.3” fxFlex.lg=”25” fxFlex.gt-lg=”20”	class=”w-full sm:w-1/2 md:w-1/3 xl:w-1/5”
fxFlexFill	class=”w-full” or class=”h-full”
fxFlex=”1 1 100%”	class=”w-full” or class=”h-full”
fxLayout.gt-sm=”row wrap”	class=”flex flex-row md:flex-wrap”
fxLayout=”column” fxLayoutAlign=”center center”	class=”flex flex-col justify-center items-center”
[fxShow]=”settings.displaySearchBar” [fxShow.xs]=”false”	class=”hidden” [ngClass]=”settings.displaySearchBar?’flex’:’hidden’”
fxLayoutAlign.xs=”start center”	class=”justify-start items-center sm:justify-start sm:items-stretch”
fxFlex=”80” fxFlex.gt-sm=”30” fxFlex.sm=”60”	class=”w-4/5 md:w-[30%] sm:w-[60%]”
[fxLayout]=”(menuParentId == 0) ? ‘row’ : ‘column’”	[ngClass]=”(menuParentId == 0) ? ‘flex flex-row’ : ‘flex flex-col’”
[fxLayoutAlign]=”(settings.menuType==’default’) ? ‘start center’ : ‘center center’”	[ngClass]=”(settings.menuType==’default’) ? ‘justify-start items-center’ : ‘justify-center items-center’”

7. 设置默认的字体排版

npm install @tailwindcss/typography@latest --save-dev

修改tailwind.config.js

// tailwind.config.js

  module.exports = {
    theme: {
      ...
    },
    variants: {},
    plugins: [
      require('@tailwindcss/typography'),
    ]
  }

通过require这个插件，我们收到了一个新的特殊实用程序类，名为prose。这个强大的类为任何普通HTML提供了排版样式。要使用这种功能，您所要做的就是将prose类添加到元素中。

<article class="prose">
  <h2>This is a h2 heading, and will be styled by the prose class</h2>
  <p>This paragraph tag is also styled by the prose class</p>
  <ul>
    <li>Even this list item</li>
    <li>Cool he?</li>
  </ul>
</article>

现在，文章标记中的所有内容都应用了很好的样式设计。

8. 关联阅读

tailwindcss教程

20 个最佳 Tailwind CSS 组件库

9. 参考文档

Angular Layout Migration Guides

You might not need Angular Flex-Layout

The best way to set typographic defaults in Tailwind CSS