Reader, I’m extremely sorry for using the clickbait-y headline for this post. I did not mean to talk ill about anything since this is not a rant 😷
Angular Flex-Layout library is really useful even today to quickly sprinkle CSS Flexbox or Grid layout declaratively in Angular applications. And it does save time in comparison with writing layout CSS by hand in various Angular components repetitively. So not using it in Angular applications is not an option unless a far better alternative with the same declarative ability is available. So I’m looking for,
- Declarative without steep learning curve.
- Cost effective over Network.
- Customisable enough to be an alter ego of Angular Flex-Layout
Turns out TailwindCSS hits a home run on these front. It is equally declarative for being a utility-first CSS framework packed with all kinds of CSS classes baked in. It reduces the main bundle size in Angular applications by a huge margin – the larger the applications, the better the gain (a sample application I built has seen ~40% dip in main bundle size without gzip). Watch the video for the proof 👇
If you are convinced by the demo above then you may find this comparison handy while moving away from Angular Flex-Layout in your application too.
| Angular Flex-Layout directives | Tailwind Equivalent CSS classes |
| fxLayout=”<direction> <wrap>” | Use flex 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 margin-right=”% | px | vw | vh” on flex items |
| fxFlex=”” | px | % | vw | vh | <grow> | <shrink> <basis> | Use flex, grow, and shrink classes along with custom flex-basis classes overriding *tailwind config* |
| fxFlexOrder=”int” | Use Order classes along with custom classes overriding *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’ } …. }, } } |
| [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 for grid-template-areas so we have to use grid columns and 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 classes |
| gdAuto | Use Grid Auto Flow classes |
| gdColumns | Use Grid Template Columns classes along with custom classes overriding *tailwind config* |
| gdRows | Use Grid Template Rows classes along with custom classes overriding *tailwind config* |
| gdGap | Use Gap classes along with custom classes overriding *tailwind config* |
Unlike TailwindCSS, Angular Flex-Layout also has Media Observer which enables applications to listen for media query activations. I think, Breakpoint Observer from Angular CDK can compensate for it.
Wrap-up
Alright, that’s me. You can find the source code of the aforementioned sample application on https://github.com/codef0rmer/you-might-not-need-angular-flex-layout
Do let me know in the comment if you agree with the proposed solution or If I miss anything to cover?
🎅 Happy Xmas and Happy New Year 2021 🎅
Update 1
I have tried to integrate tailwind in Angular application using Angular Material and found a few issues with CSS specificity. Meaning in certain cases, the tailwind CSS classes do not get applied as expected and to obviate the issue, I had to apply !important on handful of tailwind CSS classes. The approach was tweeted last time:
Its always better to hack around than... 